2021-03-18

3.18
css元素：width height
overflow：设置超出内容的的展示方式 ：
visible显示
hidden隐藏
scroll在设置的范围内显示多处的内容（两个方向出现滚动条）
auto哪个方向（x,y轴）溢出，相应的方向自动出现滚动条
overflow:hidden 隐藏超出内容，只显示填充盒区域的内容
overflow-y:scroll
overfolw-y:auto自动识别超出范围产生滚动条
断词规则：（当满足一行时 以什么方式换到第二行）
英文：空格或标点符号
中文：空格。[空格]
数字：空格或标点符号
word-break:break all; 不断词（当占满宽度时，再换行）
word-break:normal; 按照断词规则执行
（line-height） 行高等于高时可以实现文本居中
子盒子
边框盒（border box) 由border.padding.content组成
填充盒（padding box）由padding.content组成
内容盒（content box）由content组成
url统一资源路径
url小括号里面是图片的位置，需要加引号
background-image: url(IMG/ft.jpg);
背景
设置背景的显示区域 剪切
例子：background-clip:border-box;
background-clip:padding-box;
border-box(默认值) 边框盒的左上角开始
padding-box(默认值) 填充盒的左上角开始
content-box(默认值) 内容盒的左上角开始
设置背景的渲染区域
border-box(默认值) 边框盒的左上角开始
padding-box(默认值) 填充盒的左上角开始
content-box(默认值) 内容盒的左上角开始
普通盒模型和IE浏览器的区别：
当设置元素宽高的时候，他们的计算方式不同
box-sizing :设置盒子的计算规则
content-box:默认值
IE盒模型的使用场景：
宽度给100%的基础上，又添加了其他盒子的尺寸，为解决滚动条的问题，因此更改盒子的计算规则来实现效果
outline:轮廓
优点：不占像素
缺点：不可以分别设置四个方向的值（四个方向样式统一）
例子;outline:5px solid red;
继承(inherit),是指子元素会自动拥有父元素的某些css属性
继承发生的场景：
1.该属性是可继承元素
2.该属性没有应用过其他样式
定义：强制继承是指将css属性值设置为inherit
这样做的两个原因：
1.为了继承有些不可继承的属性
2.为了继承已被声明过的属性
（盒模型当中只有margin可以取负值)