css笔记（二）
笔记基于尚硅谷 菜鸟教程
目录
1. 文档流
2.盒子模型
2.1简介
2.2 边框
2.3盒子的内边距
2.4盒子的外边距
2.5盒子在水平方向的布局
2.6盒子在垂直方向的布局
2.7外边距的折叠
2.8行内元素的盒模型
2.9浏览器的默认样式
2.10盒子的大小
2.11盒子的阴影轮廓和圆角
1. 文档流
我们认为网页是一个多层结构，是一层一层的
可以通过css为每一次设置样式
用户只能看到最上面的一层
我们称最下面的一层叫文档流，文档流是网页的基础
我们创建的元素默认是在文档流中进行排列
对于我们来说元素主要有两种状态
在文档流中
不在文档流中
元素在文档流中的特点：
块元素
-在页面中会独占一行
默认宽度是占满父元素
默认高度是被子元素撑开
行内元素
不会独占页面的一行，值占自身大小
自左向右排列
和书写习惯一致
行内元素默认的高度和宽度都是被内容撑开
2.盒子模型
2.1简介
CSS将页面全部元素设置为了一个矩形的盒子
将元素设置为矩形的盒子之后，对网页的布局就变成了对不同盒子放在不同的位置
每一个盒子都有以下几个部分
内容区(content)
内边距(padding)
边框(border)
外边距(margin)
内容区的设置，大小和高度默认设置的是内容区属性
边框和内边距的设置会将盒子撑开
2.2 边框
边框的3个样式设置
- 边框的颜色 border-width
- 边框的宽度 border-color
- 边框的样式 border-style
边框的宽度
默认值一般是 3px
border-width可以用来指定四个方向边框的宽度
四个值 上 右 下 左
三给值 上 左右 下
两个值 上下 左右
一个值 上下左右
除border-width还有一组border-xxx-width
xxx可以是top right bottom left
用来单独指定某一个边的宽度
边框的颜色
border-color用来指定边框的颜色，同样可以分别指定四个边的边框
规则和border-width一样
边框的样式
border-style指定边框的样式
solid 表示实线
dotted 点状虚线
deshed 点状实线
double 双线
示例
border-style: double;2.3盒子的内边距
- 内容区和边框之间的距离是内边距
- 一共有四个方向的内边距
padding-top
....
- 内边距设置会影响盒子的大小
- 背景颜色会延伸到内边距上
- 盒子大小由内容区，边框，内边距共同决定
所以计算盒子大小时，需要将这三个区域加在一起计算
padding 内边距的简写属性 可以分别指定四个方向的内边距
规则与border-width相同
2.4盒子的外边距
- 外边距不影响可见框的大小
- 外边距会影响盒子的位置
- 一共有四个外边距
用法和border-width相同
- 元素会尽量的自左向右顺序排列，在默认情况下如果我们设置左上的边距会影响自己，右下会影响别人
- 也可以设置负值，但是元素会向左上移动
- margin不会影响元素的可见框的大小，但是会影响盒子的实际大小
2.5盒子在水平方向的布局
元素在父元素的位置由以下属性决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在他的父元素中
子元素的margin-left+border-left+padding-left+width+padding-right+border-right=父元素宽度(必须满足)
等式不成立的时候，我们称他为过度约束，这个时候我们会自动调整
如果7个值中没有auto会先调整margin-right
这7个值中有三个可以设置为auto
width (默认是auto)
margin-left
margin-right
- 如果某一个值为auto就会先自动调整那个值
- 如果一个宽度和一个外边距是auto，那么宽度会调整到最大，设置为auto的外边距会自动为0
- 如果三个都是auto，那么宽度会是最大
- 如果外边距都是auto，那么两个auto会赋相同的值(常用这个特点实现水平居中)
使一个元素在其父元素中水平居中水平居中
示例：
width: xxxpx;
margin: 0 auto;2.6盒子在垂直方向的布局
在未给父元素设置高度时，盒子的高度默认的父元素高度被子元素撑开
子元素在内容区中排列
如果给父元素设置了高度，子元素的大小超过父元素则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素
可选值：
- visible：(默认值)子元素从父元素中溢出，在父元素的外部显示
- hidden:溢出的元素将会被裁减而不显示
- scroll:生成两个滚动条，通过两个滚动条实现浏览
- auto：根据需要生成两个滚动条
2.7外边距的折叠
相邻的垂直方向的外边距会发生折叠现象
——相邻元素垂直外边距之间会发生重叠
兄弟元素
兄弟元素之间相邻垂直外边距会取较大值
特殊情况
如果两个一正一负取和
如果两个都是负数取绝对值较大的
兄弟元素之间外边距折叠，对于开发是有利的，所以我们不需要进行处理
父子元素
父子元素之间的外边距子元素会传递给父元素（上外边距）
父子外边距折叠会对页面造成影响，所以必须进行处理
2.8行内元素的盒模型
- width,height不支持设置宽度和高度
- 行内元素可以设置padding 垂直方向不会影响布局
- 行内元素可以设置boarder 垂直方向不会影响布局
- 行内元素可以设置margin 垂直方向不会影响布局
行内元素不折叠，只相加
display 用来设置元素显示的类型
- inline 设置为行内元素
- blockn 行内转换块元素
- inline-block 行内块 既可以设置宽度又不会独占一行,类似于替换元素
- table 将元素设置为一个表格
- none 元素不在页面中显示（什么都没了）
visiblility 用来设置元素的显示状态
- visible 默认值 元素在页面中正常显示
- hidden 元素在页面隐藏不显示，但是依然占据页面中的位置
2.9浏览器的默认样式
通常情况下浏览器会为一些元素设置一些默认样式
默认样式的存在会影响到页面的布局
通常情况下编写页面时必须要去除浏览器的默认样式
重置样式表有两个（百度搜索）
- reset.css 去除了所有的css样式
- normalize.css 是将css样式进行了统一但不去除
或者
*{
padding: 0;
margin: 0;
}2.10盒子的大小
默认情况下盒子的可见框大小是由内容区，内边距，边框共同确定的
box-size 可以设置盒子的计算方式，设置width，height的作用域，可选值：
- content-box 默认值，使用宽度高度设置内容区的大小
- border-box 宽和高用来设定整个盒子可见区的大小
2.11盒子的阴影轮廓和圆角
outline 用来设置元素的轮廓线，用法和boarder一样，但是轮廓不影响页面的布局
boxs-shadow用来设置元素的阴影效果，不影响页面布局
- 第一个参数 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
- 第二个参数 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
- 第三个参数是影印的模糊半径
- 第四个是影印的颜色
示例
.box1 {
width: 200px;
height: 100px;
box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.3);
background-color: yellow
}
圆角边框
在css中定义：border-radius:length;
length:表示为画圆的半径大小;
也就是说这样定义： border-radius:10px;
10是代表你圆角的弧度。越大越明显！！！
当然也可以用百分比来表示：比如： border-radius:10%;
如果想设置为一个圆形的，那么我们直接设置为盒子的一半，
比如我们盒子是一个正方形，高度为100px;宽度为100px;
那我们可以这样设置 border-radius:50px;或者border-radius:50%;
length:高度一半/宽度一半！
圆角矩形
如果是一个矩形，那我们设置为高度的一半就可以了。
当然我们也可以一个一个设置
border-radius:10px 20px 30px 40px;
这样设置，我们是从左上角开始设置，然后顺时针进行设置，每一个数值都是对应角的弧度。
如果要单独设置其中一个的话，我们就这样写：
- 左上角：border-top-left-radius:10px;
- 右上角：border-top-right-radius:10px;
- 左下角：border-bottom-left-radius:10px;
- 右下角：border-bottom-right-radius:10px;