【前端css学习笔记】盒子模型margin paddind 文本内容 broder边框的属性

1.css的三大特性

1.1层叠性

给相同的选择器设置相同的样式，其中一个样式会覆盖另一个样式，覆盖的原则是就近原则

1.2继承性

就像现实生活中，孩子可以继承父亲的财产一般，子元素可以继承父元素的大部分样式，例如文字类的样式 font text line-height color等

案例：

段落p继承了来自父亲元素的字体颜色和字体大小…

1.3行高的继承性

子元素继承父元素的行高规则是，假如父元素的行高没有设置一个具体的像素大小，而是一个倍数数字；那么，子元素的行高就等于 子元素的字体大小*倍数，如果子元素没有设置字体大小，默认的字体大小就是从父亲继承来的字体大小。

1.4优先级

如果给不同的选择器设置相同的属性，那么就根据选择器的优先级来决定，到底使用哪一个选择器的样式

！important >> 行内样式style >> #id选择器 >> .类选择器,伪类选择器 >> 元素标签选择器>>*统配选择器>>继承

权重 无穷大 》》 1，0，0，0 》》0，1，0，0 》》 0，0，1，0 》》 0，0，0，1 》》0

注意点: 浏览器默认给链接加了一个颜色为蓝色的元素选择器

继承的权重是0

如果是复合选择器是后代选择器，就要加上父元素选择器的权重

.nav li权重是10加上1 等于11

1.4.1复合选择器的优先级

如果选择器是复合选择器，就要进行权重叠加来判断 到底使用哪一个选择器

注意：权重进行累加不会有进位的问题

例如

ul li{   权重是 两个元素选择器相加 0,0,0,1加上0，0，0，1等于0，0，0，2

color:green;

}

li{ 权重是一个元素选择器  等于0，0，0，1

color:blue;

}

.nav li{ 权重是一个类选择器加上一个元素选择器  等于0，0，1，0加上0，0，0，1等于0，0，1，1

color:pink;

}

所以.nav li的权重大于ul li的权重大于li的权重

2盒子模型

网页上的元素都可以看作是一个盒子，盒子模型由边框 ，内容，内边距，外边距四部分组成

2.1边框border

2.2.1边框的三部分组成

border-width 边框的粗细

border-style边框样式

border-color 边框的颜色

2.2.2边框的复合写法

border: 粗细，样式，颜色 没有顺序要求 只要属性写对没有任何顺序要求

例子： border: 2px solid pink;

border分为上下左右，可以单独设置它们的属性

可以利用css的层叠性给边框的四条边设置不同的样式

border-top,border-bottom,border-left,border-right

例子：

border-bottom: blue 5px dashed;

2.2.3边框的粗细

给盒子内容加上边框，会使盒子的大小变大 ，盒子的大小等于盒子本身的大小加上边框大小

2.2.盒子的内边距

给盒子加上内边距，会使盒子里面的内容距离盒子左上角有一定的距离，方位定位内容

paddind-left paddind-top padding-bottom padding-right

2.2.1内边距的复合写法

1. padding: 5px; 如果只有一个值，代表上下左右都有5px的内边距
2. padding :5px 10px 如果有两个值，代表上下5px, 左右10px
3. padding : 5px 10px 20px 如果有三个值，代表上5px, 左右10px, 下20px
4. padding: 5px,10px,20px,30px 如果有四个值，代表上右下左 顺时针分别是 5,10,20,30px的内边距

2.2.2内边距会撑大盒子的大小（如果当前盒子设置了宽/高）

1. 如果要解决实际开发中的需要，为了让盒子保证原有的大小，并且也能有内边距，则让盒子的宽度和高度减去多出来的内边距大小即可（因为内边距会撑大盒子的大小）

2. 内边距撑大盒子也会带来优点

   我们可以通过提前给盒子设置内边距，并设置固定的高度（块元素/行内块元素才可以），然后填充内容，可以实现盒子宽度根据内容实时 变化

3. 如果盒子本身没有指定宽或者高，那么padding就不会撑开盒子的大小

   假如盒子只指定了宽，那么padding只会撑开左右的大小

   假如盒子只指定了高，那么padding只会撑开上下的大小

   假如盒子既指定了宽又指定了高，那么pdding会撑开上下左右的大小

2.2.3内边距的合并

border-collapse: collapse;

2.3盒子的外边距

margin指的是盒子与盒子之间的距离

和内边距padding类似,外边距也分上下左右

margin-left margin-right margin-top margin-bottom 

2.3.1也能复合着写，复合的效果和padding内边距一致

通过调试器中的computed能够更直观的看到盒子模型的结构

2.3.2外边距实现盒子水平居中

需要满足的两个前提条件是

盒子必须指定了宽度（因为如果没有指定宽度，默认的宽度就是父元素的宽度就没有居中的效果，而是全屏铺满）

盒子的左右外边距设置为auto

实现：

margin: 0 auto;

margin: auto ;水平垂直都居中

margin-left:	auto; 	margin-right:	auto;

margin:100 auto; 水平居中，上下	100px的外边距

如果想要行内/行内块元素水平居中，只需要找到它们的父元素，添加text-align:center的属性即可

2.3.3外边距的合并塌陷

介绍：如果有两个嵌套块元素，如果子元素设置了外边距，那么父元素会随着子元素一起向下塌陷（巧记：这个子元素还不不独立，还依赖着父元素，会拉着父元素一起变化）

如果父元素和子元素都设置了外边距，那么子元素和父元素会一起塌陷，塌陷的程度由两个元素外边距较大的那个决定

解决方案：

1.给父元素设置边框，（父元素和子元素划立了界限，子元素开始独立）

border: 1px solid transparent;  transparent代表透明

2.为父元素定义内边距 （父元素给子元素在内部划了一条界限）

3.给父元素加上 overflow: hidden的属性

2.4清除内外边距

在第一行css代码上写上

*{

padding:0;

margin:0;

}

就能清楚一些原本带有内外边距的元素了

行内元素尽量只设置左右的内外边距，因为行内元素的上下边距浏览器本来就不显示