CSS基本语法及页面引用
CSS基本语法
css定义的方法是：
选择器{属性:值;属性:值;}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性都有一个或多个值。
示例：
div {width:100px;height:100px;color:red}
css 页面引入的方法
- 外联式；通过link标签，链接到外部样式表到页面中。
- 嵌入式；通过style标签，在网页上嵌入的样式表。
...
...
- id选择器
通过id来选择元素，元素的ID名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id一般给程序使用，所以不推荐id作为选择器
#box{color:red}
...
- 类选择器
通过类名来选择元素，一个类可以应用于多个元素，一个元素也可以使用多个类，应用灵活，可以复用，是css中应用最多的一种选择器
...
hello
hello
- 层级选择器
主要应用选择父元素的子元素，或者子元素下面的子元素，可以与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突
...
...
- 伪元素选择器
常用的伪元素选择器有hover,表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after，他们可以通过样式在元素中插入内容。
...
...
...
CSS盒子模型
元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实生活中盒子来做比喻，帮助我们设置元素对应的样式，如下：
把元素叫做盒子，设置的样式分别为：盒子的边框（border）,盒子内的内容和边框之间的间距（padding）,盒子与盒子之间的间距（margin）
- 开发中，如果left，right,top,buttom属性相同，我们不用每次都写xxx-top=bala... xxx-right=bala...
我们可以直接进行简写：
margin相关技巧
- 设置元素水平居中：margin: x auto
- margin负值让元素位移以及边框合并
外边距合并
外边距合并是指：当两个垂直外边距相距时，他们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度的较大者。解决方法如下：
- 使用这种特性
- 设置一边的边距，一般设置margin-top
- 将元素浮动或者定位
margin-top塌陷
在两个盒子嵌套的时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决办法如下：
- 外部盒子设置一个边框
- 外部盒子设置overflow：hidden
- 使用伪元素
.clearfix:before{
content:' ';
display: table
}
盒子的真实尺寸
盒子的宽度：width+左右的padding+左右的border
盒子的高度：height+上下的padding+上下的border
width其实代表的是盒子内容的尺寸，并不是盒子本身的尺寸。
需求：
布局下面的标题：
实现方式1：
新闻标题
注意
微软雅黑字体自带大小，如果不指定line-height会导致布局异常。
实线方式2：
使用text-indent进行首行缩进，不会影响width的长度，设置line-hight=height文字自动居中。
新闻标题
CSS元素溢出
当子元素的尺寸超过父元素时，需要设置父元素显示溢出子元素的方式，设置方法是通过overflow属性来设置。
overflow的设置项：
- visable默认值。内容不会被修剪，会呈现在元素框之外。
- hidden内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动，清除margin-top塌陷的功能。
- scroll内容会被修剪，但是浏览器会显示滚动条一边查看其余的内容
- auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
- inherit规定应该从父元素继承overflow属性的值。
块元素、内联元素、内联块元素
块元素
块元素，也可以称为行元素，布局中常用的标签有：div,p,ul,li,h1~h6,dl,dt,dd等等都是块元素。他在布局中的行为：
- 支持全部样式
- 如果没哟设置宽度，默认宽度为父级宽度100%
- 盒子占据一行，及时设置了宽度
内联元素
内联元素，也可以称之为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，他们在布局中的行为：
- 支持部分样式（不支持宽，高，margin上下，padding上下）
- 宽高由内容决定
- 盒子并在一行
- 代码换行，盒子之间会产生间距
- 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性设置垂直对齐方式。
解决内联元素间隙的问题
- 去掉内联元素之间的换行
- 将内联元素的父级设置font-size为0，再设置自身font-size
内联块元素
内联块元素，也叫行内元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转换为这种元素，他们在布局中的表现的行为：
- 支持全部样式
- 如果没有设置宽高，宽高由内容决定
- 代码换行，盒子会产生间距
- 子元素是内联块元素，父元素可以用text-align属性设置元素水平对齐方式，用line-height属性设置子元素垂直对齐方式
这三种元素，可以通过display属性相互转换，不过实际开发中，块元素用的比较多，所以，我们常把内联元素转换为块元素，少量转换为内联块，而要使用内联元素时，而不用块元素转换了。
display属性
display属性是用来设置元素的类型以及隐藏的，常用的属性有：
- none元素隐藏且不占位置
- block元素以块元素显示
- inline元素以内联元素显示
-
inline-block元素以内联块元素显示
需求：
image.png
浮动
文档流
文档流是指盒子按照html标签编写的顺序依次从上到下，从左到右，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子占据自己的位置。
浮动特性
- 浮动元素有左浮动（float:left）和右浮动（float:right）两种
- 浮动元素会向左或者向右浮动，碰到父元素边界，浮动元素，未浮动的元素才停下来
- 相邻浮动的块元素可以并在一行，超出父级宽度就换行
- 浮动让行内元素或者块元素自动转换为行内块元素
- 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动元素的内的文字会避开浮动的元素，形成文字饶图的效果
- 父元素内整体浮动的元素无法撑开父元素，需要清除浮动
- 浮动元素之间没有垂直margin的合并
清除浮动
- 父级元素增加属性：
overflow:hidden - 在最后一个子元素的后面增加一个空的div，给他样式属性
clear:both(不推荐) - 使用成熟的清除浮动样式类，clearfix
定位
使用position属性来设置元素的定位类型，position的设置如下：
- relative生成相应定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
- absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对固定定位元素来进行定位，如果找不到，则相对于body元素进行定位。
- fixed 生成固定定位元素，元素脱离文档流，不占据文档流位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
- static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
- inhert从父元素继承position属性的值
元素定位特征
绝对定位和固定定位的块元素和行内元素会自动转换为行内块元素
定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级
典型定位布局
- 固定在顶部的菜单
- 水平垂直居中弹框
- 固定在侧边的工具栏
-
固定在底部的按钮
案例1：
布局上面的导航栏
image.png
案例2：
background
他负责给盒子设置背景图片和背景颜色，backgruond是一个复合属性，他可以分解为：
- backgrround-color:设置背景颜色
- background-image:设置背景图片地址
- background-repeat:设置背景图片如何设置平铺
background-position:设置图片的位置 -
background-attachment 设置背景图片是固定的还是随着页面滚动条滚动
案例3：
image.png