前端学习之CSS3第三天
一、CSS的三大特性:层叠性、继承性、优先性
1.层叠性:相同的选择器设置相同的样式,里面的值是不一样的。
原则:就近原则,那个样式离着body近就用那个里面的值。
主要是解决样式冲突的问题。
2.继承性:子标签会继承父标签的某些样式,如文本颜色、字体属性等。
如:行高的继承:如果一个盒子没有高度,如果在body指定行高1.5倍,子元素可以根据自己文字的大小自动调整行高。
3.优先级:
选择器 | 权重 |
---|---|
继承或者* | 0,0,0,0 |
标签选择器 | 0,0,0,1 |
类选择器/伪类选择器 | 0,0,1,0 |
id选择器 | 0,1,0,0 |
行内样式 | 1,0,0,0 |
important | 无穷大 |
注意:权重会叠加,但是不会进位。继承的权重是0
二、盒子模型
盒子模型的组成:1.内容 2.边框 3.内边距 4.外边距
1.盒子模型的边框 border:
属性 | 作用 |
---|---|
border-width | 边框的粗细,单位是px |
border-style | 边框的样式:solid实线/dashed 虚线/dotted 点线 |
border-color | 边框的颜色 |
边框的复合属性写法没有顺寻的要求,推荐写法为:
border: 1px solid #000;
另外可以给盒子单独设置一个边框:
border-top:1px solid #000
border-bottom: 1px solid #000
border-left:1px solid #000
border-right:1px solid #000
表格细现边框:可以把相邻的边框和并到一起,仅适用于表格中
border-collapse:collapse
注意边框的表格线会影响盒子的实际大小
解决的方法:1.测量盒子大小的时候不要测量边框 2.用width和height减去边框宽度。
2.内边距
内边距主要是设置内容与边框之间的距离
可以在一个盒子中分别设置四个方向的内边距代码如下
padding-top:10px;
padding-bottom:20px;
padding-left:30px;
paddding-right:40px;
内边框(padding)的复合属性的写法
值得个数 | 含义 |
---|---|
padding:10px | 上下左右的边距都为10像素 |
padding:10px 20px; | 上下为10像素,左右为20像素 |
padding:10px 20px 30px | 上为10 左右为20 下位30 |
padding:10px 20px 30px 40px; | 上为10,右为20,下为20,左40 |
注意:内边距(padding)也会影响盒子的大小
解决的方法:用width和height减出多出来的内边距(padding)
2.1 处理行内块元素(inline-block)的间隙的方法:
将父元素的字体设为0(font-size),内部重新设置字体
2.2 如果块元素的宽度(width)没有被指定,padding不会撑大盒子的宽度。
前提是padding小于父盒子的宽度。
3.外边距:控制盒子与盒子之间的距离
可以给一个盒子分别设置外边距如下:
margin-top:10px;
margin-bottom:20px;
margin-left:30px;
margin-right:40px;
margin外边距符合属性的写法
值得个数 | 含义 |
---|---|
margin:10px; | 上下左右的外边距 |
margin:10px 20px; | 上下的边距为10,左右的为20 |
margin:10px 20px 30px; | 上为10,左右为20,下为30 |
margin:10px 20px 30px 40px; | 上为10,右为20,下为30,左为40 |
用外边距来实现块级盒子水平居中两个条件:1.盒子必须有宽度 2.水平间距设置为auto 比如:margin:10px auto;
让行内元素和行内块元素水平居中方法是:给其父元素添加 text-align:center
3.1 相邻元素垂直外边距合并的情况,解决的方法:上面的盒子设置 margin-buttom,下面的盒子设置 margin-top ,只会取最大的值,所以之能给一个盒子设置外边距。
4.外边距合并-嵌套块元素塌陷
嵌套块元素塌陷的情况: 1.父子元素同时具有上外边距 2.父元素会塌陷较大的外边距
解决的方案:1.给顶部增加边框 2.顶部增加内边距 3.overflow:hidden
5清除内外边距:网页的元素中都有默认的内外边距,清除内外边距可以避免样式对布局的干扰。
写法: * {
margin:0px;
padding:0px;
}