](文章目录)
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
Web前端续写（二）
一、CSS选择器？
1.ID选择器
格式：CSS：#elem{ }
HTML：id=“elem”
注：
1.在一个页面中，ID值是唯一的。出现多次是不符合规范的。
2.命名规范，字母_-数字（命名的第一位不能是数字）。
3.命名方式：驼峰式:searchButton(小驼峰） SearchButton(大驼峰） searchSmallButton
下划线式:search_small_button
短线式:search-small-button
2.CLASS选择器
格式：CSS：.elem{ }
HTML:class = “elem”
注：
1.class选择器是可以复用的
2.可以添加多个class样式
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
4.标签+类的写法
3.标签选择器（TAG选择器）
格式：CSS：div{ }
HTML:<div>
使用的场景：
1.一般被用到更复杂的选择器中，如层次选择器
2.去掉某些标签的默认样式
4.群组选择器
可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。
5.通配选择器
格式：*{ } --> div,ul,li,p,h1,h2…{ }（包含所有的标签）
尽量避免使用，因为会给所有的标签添加样式
使用的场景：去掉所有标签的默认样式
6.层次选择器
后代 格式：M N{ }（中间通过空格隔开）
使用场景：在指定范围N内寻找M
父子 格式：M>N{ }
使用场景：对指定范围N内寻找M，但是M N之间只有一层嵌套关系
兄弟 格式：M~N{ }
使用场景：先找到M，再找到M下面的N
相邻 格式：M+N{ }
使用场景：先找到M，再找M下面相邻的N，只选一个
7.属性选择器
M[
属性]{ }
找所有M标签中带有相同属性的
若M标签中存在的 属性 = xxx 这样的样式，就可以选中HTML中的部分匹配和全部匹配的标签
>*：表示部分匹配
=：表示完全匹配
^=: 起始匹配
$=: 结束匹配
8.伪类选择器
CSS伪类用于向某些元素添加特殊效果。一般用于初始样式添加不上的时候，用伪类来添加。
格式：M：伪类{ }
:link 访问前的样式（只能添加给a标签）
:visited 访问后的样式（只能添加给a标签）
:hover 鼠标移入时样式（能添加给所有标签）
:active 鼠标按下时的样式（能添加给所有标签）
如果以上四个伪类都生效，一定要注意顺序：L V H A
一般网站只设置：a{ } a:hover{ }
:after :before 通过伪类的方式（content属性）给元素添加一些文本内容。
:checked :disabled :focus 这些针对表单元素
结构型伪类选择器nth-of-type( ) nth-child( )
角标是从1开始的 ，1表示第一项 ，2表示第二项 ，n值表示从0到无穷大
first-of-type
last-of-type
only-of-type
`nth-of-type( )和nth-child( ）之间的区别
type ：类型
child ： 孩子
二、CSS继承？
文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性 inherit 值）
三、CSS优先级？
1.相关样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
2.内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
3.单一样式优先级
style行间 > id > class > tag > * >继承
`注：style行间 权重 10000
id 权重 100
class 权重 10
tag 权重 1
4.！important
提升样式优先级，非规范方式，不建议使用。（不能针对继承的属性进行优先级的提升）
5.标签+类与单类
标签+类 > 单类
6.群组优先级
群组选择器与单一选择器优先级相同。靠后写的优先级高。
7.层次优先级
1.权重比较
ul li .box p input{ } 1 + 1 + 10 + 1 + 1
.hello span #elem{ } 10 + 1 + 100
2.约分比较·
ul li .box p input{ } li p input{ }
.hello span #elem{ } #elem{ }
四、CSS盒子模型？
组成：content – > padding – > border --> margin
物品 填充物 包装盒 盒子与盒子之间的间距
content : 内容区域 width和height组成的
padding : 内边距（内填充）
只写一个值 ： 30px（上下左右）
写两个值 ： 30px 40px（上下、左右）
写四个值 ; 30px 40px 50px 60px(上、右、下、左）
单一样式只能写一个值：
padding-left
padding-right
padding-top
padding-bottom
margin: 外边距（外填充）
只写一个值 ： 30px（上下左右）
写两个值 ： 30px 40px（上下、左右）
写四个值 ; 30px 40px 50px 60px(上、右、下、左）
单一样式只能写一个值：
margin-left
margin-right
margin-top
margin-bottom
1.box-sizing
盒尺寸，可以改变盒子模型的展示形态。
默认值：content-box : width 、 height – > content
border-box : width 、 height --> content padding border
使用场景：1.不用再去计算一些值
2.解决一些百分率问题
2.margin叠加
当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。
解决方案：1.BFC规范
2.想办法只给一个元素添加间距
3.margin传递
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。
解决方案：1.BFC方案
2.给父容器加边框
3.margin换成padding
扩展：1.margin左右自适应是可以的，但是上下自适应是不行的。（如果实现上下自适应的话，需要在第二大部分来学习） 2.width、height不设置的时候，对盒子模型的影响，会自动计算容器的大小，节省代码。
例题：
五、标签分类？
1.按类型
block ： div 、 p 、 ul 、 li、 h1…
特点：1.独占一行
2.支持所有格式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形
inline： span 、 em 、 strong、 img…
特点：1.挨在一起
2.有些样式不支持，例如：width、height、margin、padding
3.不写宽的时候，宽度由内容决定
4.所占的区域不一定是矩形
5.内联标签之间会有空隙，原因：换行产生的
inline-block : input、 select…
特点：挨在一起，但支持宽高
注：布局一般用块标签，修饰文本一般用内联标签
2.按内容
Flow : 流内容
Metadate : 元数据
Sectioning : 分区
Heading : 标题
Phrasing： 措辞
Embedded : 嵌入的
Interactive : 互动的
按内容划分详解
3.按显示
替换元素 ： 浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如：img、 input…
非替换元素 ： 将内容直接告诉浏览器，将其显示出来。
例如 ： div、 h1、 p…
六、显示框类型？
display : block inline inline-block none……
区别：
display : none 不占空间的隐藏
visibility : hidden 占空间隐藏
七、标签嵌套规范？
ul li
dl dt dd
table tr td
块能够嵌套内联
<div>
<span></span>
<a href=“#”><a>
</div>
块嵌套块
<div>
<div></div>
</div>
<div>
特殊：
错误的写法:
<p>
<div></div>
</p>
内联是不能嵌套块的
<span>
<div></div>
</span>
特殊：
正确的写法:
<a href=“#”>
<div></div>
</a>
八、溢出隐藏？
overflow:
visiable : 默认
hidden
scroll
auto
x轴、y轴
overflow-x、overflow-y针对两个轴分别设置
九、透明度与手势？
opacity : 0(透明） ~ 1（不透明）
0.5(半透明）
注：占空间、所有的子内容也会透明
rgba( ) : 0 ~ 1
注：可以让指定的样式透明，而不影响其他样式
cursor : 手势
default : 默认箭头
要实现自定义手势：
准备图片：,cur、.ico
ciursor ：url(./img/cursor.ico),auto;
九、最大最小宽高？
min-width、 min-height
max-width、 max-height
%单位 : 换算 – > 已父容器的大小进行换算的
一个容器怎么适应屏幕的高：容器加 height:100%; body: 100%; html: 100%;
html,body{ height:100%;}
.contrainer{ height:100%;}
十、CSS默认样式？
没有默认样式的： div、span
有默认样式的：
body – > margin : 8px
h1 – > margin : 上下 21.440px
font-weight : bold
p – > margin : 上下 16px
ul – > margin : 上下 16px padding ： 左 40px
默认点：list-style : disc
a – > text-decoraction : underline;
CSS reset :
*{ margin:0; padding:0;)
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微地影响性能
body,p,h1,ul{ margin:0; padding:0;}
ul{ list-style : none;}
a{ text-decoration: none; color:#999;}
img{ display:block}
问题的现象：图片跟容器底部有一些空隙
如图：
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
vertical-align: baseline; 基线对齐方式，默认值
img{ vertical-align:bottom;}解决方式是推荐的
写具体页面或一个布局效果的时候：
1.写结构
2.CSS重置样式
3.写具体样式
十一、Float浮动？
文档流：文档流是文档中可显示对象在排列时所占用的位置。
float特性：加浮动的元素，会脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
float取值：left right none(默认）
float注意点
只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
主要给块元素添加，但也可以给内联元素添加。
如何清除浮动
上下排列：clear属性，表示清除浮动的，left 、right、 both
嵌套排列：
固定宽高 ： 不推荐，不能把高度固定死，不适合做自适应的效果
父元素浮动 ： 不推荐，因为父容器浮动也会影响到后面的元素
overflow ：hidden(BFC规范），如果有子元素想溢出，那么会受影响
display : inline-block(BFC规范），不推荐，父容器会影响到后面的元素。
设置空标签 ： 不推荐，会多添加一个标签
after伪类 ：推荐，是空标签的加强版，目前各大公司的做法
（clear属性只会操作块标签，对内联标签不起作用）
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
