CSS 样式介绍(三)

各种样式属性

  • 注意:body标签在浏览器中 padding有默认的值 ,ul 和 li 也有默认边距,所以可以通过下面来设置默认的,清除元素默认内外边距样式
body, ul, li {
    margin: 0;
    padding: 0;
}  

* {
    margin: 0;
    padding: 0;
}   

ul {
    list-style: none; /**取消列表自带的小点**/
}

1.边框、内边距、外边距
border 属性: border: border-width || border-style || border-color
border-style 边框样式属性(边框风格):none 没有边框,默认值, solid 边框为单实线(最为常用的),dashed 边框为虚线,dotted 边框为点线,double为双实线

div { 
    border-width: 3px;
    border-color: red;
    border-style: double;
    border-top-color: red;
    border-top-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: red;
    border-bottom-style: solid;
    border-top: 1px solid red; /**上边框宽度为1 单实线 红色**/
    border-bottom: 1px solid red;
}

table {
    border: 1px solid red;
    border-collapse: collapse; /**表示边框合并在一起,合并相邻边框**/
}

 /**cellpadding 单元格的padding为0 ,单元格的间隔为0**/
<table cellpadding="0" cellspacing="0"></table>

p {
    
    border-radius: 10px; /**圆角度*/
    border-radius: 50%; /**百分比圆角度*/
    border-radius: 10px 40px; /**对角线设置圆角度:左上角 和 右下角 是10px, 右上角和左下角是40px, */
    border-radius: 10px 40px 80px; /**左上角 10px, 右上角和左下角是40px,  右下角 是 80px*/
    border-radius: 10px 40px 80px 100px; /**左上角 10px, 右上角是40px, , 右下角是80px 左下角是100;顺时针*/

    padding: 10px; /**内边距,表示上下左右内边距*/
    padding-left: 10px; /**左内边距,还有padding-right padding-top padding-bottom*/
    padding: 20px 30px; /**上下10px 左右30px*/
    padding: 10px 30px 50px; /**上下10px 左右30px 下50px*/
    padding: 10px 30px 50px 70; /**上 右 下 左*/

    margin-top: 100px; /**上外边距*/ 
    margin: 10px 20px 30px 40px; /**外边距:上 右 下 左*/
    margin: 30px; /**上右下左*/

    margin: 30px auto; /** 盒子水平居中,上下30px 左右auto(自动)  这样可以让块级带有宽度的盒子水平居中对齐*/
}

/* 注意!:我们尽量不要给行内元素指定上下的内外边距,左右可以指定*/
/* 注意!:外边距合并:垂直的块级盒子,以最大的为准*/

/*解除嵌套块元素垂直外边距的合并 塌陷的问题
    1.给border
    2.给padding
    3.overflow: hidden;
*/
.father {
    margin-top: 30px;
    margin-bottom: 200px;
    width: 300px;
    height: 300px;
    padding: 20px;
    /*border: 1px solid red; */
    /*padding: 1px;*/
    overflow: hidden;

    /*css3新增的box-sizing属性*/
    /*box-sizing: content-box;*/ /**盒子大小的width+padding+border**/
    box-sizing: border-box; /** padding不会撑开盒子宽度, 盒子大小就是width**/

    /*盒子阴影*/
    box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, 0.4);
    /*box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影(默认外阴影,内阴影是inset)*/
}

.son {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin-top: 40px;
}

2.计算盒子尺寸

  • 外盒尺寸计算:content width + padding + border + margin
  • 内盒尺寸计算:content width + padding + border
  • 如果一个盒子没有给定宽度/高度或者继承了父亲的宽度/高度,则padding不会影响盒子的大小
  • box-sizing: content-box; 代表盒子大小的为width+padding+border
  • box-sizing: border-box; 代表 padding不会撑开盒子宽度, 盒子大小就是width

3.浮动 (重点)
为什么不用display:inline-block?
display: inline-block; 转换行内块元素,就可以放一行上 但是元素之间有空隙,不方便处理,所以用浮动则之间没有间隙。

float浮动脱离标准流,标准流在地方,浮动在标准流的上方,会压着标准流。所以浮动首先创建包含块的概念,就是说浮动的元素总是找离它最近的父级元素对齐,但是不会超出内边距的范围。
浮动:如果一个盒子里面其中第一个子元素有浮动,则其他子元素都需要浮动,这样才能一行对齐显示。
浮动:元素添加浮动后,元素会具有行内块元素的特性。目的就是让多个块级元素在同一行显示。

  • 1.加了浮动的元素盒子是浮起来,漂浮在其他标准流盒子的上面
  • 2.加了浮动的盒子,不占位置的,它浮起来了,它原来的位置给了标准流的盒子

特别注意:浮动的盒子需要和标准流的父级搭配使用

特别注意:如果盒子的子元素都是浮动,并且盒子没有高度,则父亲高度为0。所以当不方便为固定高度时,为了让该盒子自动撑开则用清除浮动来完成。

/clear 是清除属性,包括 left(清除左浮动影响)、 right(清除右浮动影响) 、both(左右都清除浮动影响) 值/

  • 1.额外标签法:在浮动盒子的后面添加一个空盒子 <div style="clear: both;"></div>, 缺点:增加很多无意义标签,所以很少用
  • 2.父级添加overflow属性方法 overflow: hidden|auto|scroll都可以实现,会触发BFC BFC会触发清除浮动
  • 3.使用after伪元素清除浮动
  • 4.使用before和after双伪元素清除浮动,强烈推荐
/*3.使用after伪元素清除浮动*/
.clearfix:after {
    content: "."; /**内容是小点 ,尽量加,不要空,防止旧版本浏览器有空隙**/
    display: block;
    height: 0; /*高度为0*/
    visibility: hidden; /*隐藏小点*/
    clear: both; /**清除浮动both**/

}

.clearfix { /**ie6.7浏览器清除浮动的方式**/
    *zoom: 1; /**  *代表ie6、7能识别的特殊符号,zoom就是ie6、7 清除浮动的方法,zoom会触发 hasLayout去清除浮动*/
}

 /*4.双伪元素清除浮动,强烈推荐*/
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clear:after {
    clear: both;
}

.clearfix { 
    *zoom: 1;
}

span {
    background-color: purple;
    height: 100px;
    float: left; /**块级元素和行内元素添加浮动后具有行内块特性,span是行内元素**/
}
    

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,398评论 1 88
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 654评论 0 6
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 18,395评论 1 40
  • 什么是盒子? CSS处理网页时,它认为每个元素都包含在一 个不可见的盒子里。 我们只需要将相应的盒子摆放到网页中相...
    咻咻咻滴赵大妞阅读 298评论 0 0
  • CSS 指层叠样式表(Cascading Style Sheets),是一种用来为结构化文档(如 HTML 文档或...
    神齐阅读 630评论 0 14