-
标签
(1) 需要大家记，单标签和双标签
(2) 性能上 块标签和行标签
(3) 标签的属性
-
Css
(1) 选择器，* 标签 class id 后代 子代 交集 并集 伪类 结构
(2) 层叠性 选择器权重的计算
① 选中和选不中 如果没有选中就是继承父级的样式，采用就近原则
选中的话就计算权重，谁的权重大就选谁，如果权重相同，后者会覆盖前者。
(3).继承性 样式的属性 font color text line-height
-
排版
(1) Float
(2) Position
(3) 标准文档流:浏览器天生的一种排版方式，块独占一行，行可以并排排列。
打破标准文档流的方式有 float absolute fixed。
9.26
-
background-position 雪碧图
我们的html和css中有三个属性可以向服务器发送请求，src href url。
-
Overflow
(1) 值Hidden 超出就隐藏
(2) 值Scroll 出现滚动条
Visibility:hidden; 可见的 （消失但是占用位置）
Display:none;消失但不占用位置
为什么使用雪碧图？
因为我们使用雪碧图之后，本来需要多次请求的图片，我们一次就请求过来了，然后使用background-position调位置，从而减少了该页面向服务器请求的次数，间接的优化了该页面的性能。
9.27
-
如何实现浏览器title中的小图标
我们需要借鉴link标签
Link标签的标签属性有哪些？ rel type href
Rel 是当前页面和url之间的关系 rel=”stylesheet”
Type 是资源文件的mime类型 .html文件mime类型是text/html 图片的mime类型
Image/jpg(png/gif) css的mime类型是text/css js的mime类型是text/javascript。
Mime类型，客户端和服务器之间的暗号，根据拓展名而定。
Title中的小图标就出来了，href这里不能写成 ./
2，Meta 元信息标签
分析里面的属性
,3，矢量图标 http://www.iconfont.cn/
阿里云矢量图库。
转义字符
空格的字符
4.项目的完整目录
5.
textarea{
resize: none;
}
这个属性不让文本域被人为拉伸
6.
table{
border-collapse: collapse;
}
这个属性让表格的边框变细
7.
Font的简写
8.
清除浮动的兼容性
清除浮动在低版本浏览器不行，需要处理兼容性
加一个.clearfix{*zoom:1;}
9.光标的形状
cursor 光标属性值有 pointer 抓手，指针 wait help
-
rgb 和rgba和opacity
Rgb()颜色的表示方法值是0-255如background:rgb(12,15,16);
Opacity表示透明度 值是0-1；
Rgba() r是red 0-255 g是green 值是0-255 b是blue值是0-255 a是opacity值是0-1；
但是ie低版本不支持。
Rgb和opacity 与rgba的区别？
前者的内容也跟着透明，后者的内容不跟着透明。内容包含图片和文字。
9.28
1.transparent 透明的
2.placeholder 提示语
写页面
-
搞清结构层次，
-
保证模块化，让他们之间不能受到影响
(1) 元素性质
(2) 标准流
浮动带来的脱离文档流撑不起父级的高度的问题可以采用清除浮动的方式消除影响，absolute和fixed带来的脱离文档流撑不起父级的高度，使用子元素设置高强制撑起父级。
9.29
-
css可以继承的属性有哪些？
Font 系列 text系列 color line-height
-
border-radius的值的问题
四个值的顺序是 左上 右上 右下 左下。
-
white-space 规定段落中的文本换不换行 往往值是nowrap 不换行
-
Word-wrap 属性允许长的内容可以自动换行 属性值是 break-word 允许 默认是不允许
-
写三角形
宽高必须是0
-
margin对布局的影响 双飞翼布局 圣杯布局 （）
Margin是 外边距，属性值是数字 数字又分正负。
正数：margin：20px；
负数：在static元素中（标准流下）margin-left为负数当前元素向左走 margin-top为负当前元素向上走
Margin-bottom为负数后当前元素不动后面的元素向上走，margin-right为负数当前元素不动后面的元素向左走
注意的，margin为负会增大当前元素的宽（前提是当前元素没有设置width）
场景
给ul一个margin-right 就无形之中给ul加了20px宽度。
在float下
Margin为负 也是我们常用的双飞翼，圣杯布局
中间自适应 两端固定
给元素margin-left为负当前元素向左走，margin-right为负后一个元素向左走会覆盖当前元素。
在absolute下
Margin为负
让元素居中，前提是知道元素的宽高。
div{
Position：absolute；
Left：50%；
Top：50%；
Margin-left:-width/2;
Margin-top:-height/2
}
Margin为负无论在什么条件下都是释放自己的空间，如果自己的margin不够，就把自己的宽高贡献出去。
10.8
-
去滚动条的属性 overflow:hidden;
overflow-x:hidden; 水平超出的隐藏。
-
z-index 层次叠加 元素重叠 谁的值大谁在上面
(1) 父级出现position:relative；时候z-index失效
(2) 层叠元素出现float的时候会失效
(3) 层叠元素也得设置position:absolute/fixed.
-
background-position:100px 300px;
Background-position:0% 50%; 50% 0;
Background-position:center center;
-
absolute 绝对定位
使用这个属性之后，这个元素不会占位了，脱离标准文档流，同时元素本身也变成了行级块元素。往往需要设置width为100%;
-
marquee 滚动标签
他身上所具有的功能有标签属性决定。
Direction 决定滚动方向 默认是left right up down
Behavior 决定滚动的方式 scroll连续滚 slide 滚动一次 alternate 来回滚动
Loop 循环的次数 默认是无数次
Scrollamount 运动速度 默认是6
Scrolldelay 表示停顿的时间 单位是毫秒 1秒=1000毫秒
Aligin 元素的垂直对齐方式 top middle bottom
Width height 表示区域的大小
Hspace vspace 表示元素在区域边界的水平距离和垂直距离
10.9
一 单位
1.px 就是一个基本的单位 像素
2.em 也是一个单位 用父级元素的字体大小乘以em前面的数字。如果父级没有就继承上一个父级直到body，如果body没有那就默认是16px。
3.rem 也是一个单位，只跟根节点<html>的字体大小有关，如果没有默认是16px。
4.line-height 行高 line-height:2; 行高值 是当前数字2乘以元素字体大小。
二 浏览器
浏览器和浏览器之间是由差距的，这个差距是由浏览器自身的内核决定的。
每个浏览器都有自己的前缀，主要解决css3中的兼容问题。
Chrome(谷歌) 的前缀 -webkit-
Firefox(火狐) 的前缀 -moz-
Ie 的前缀 -ms-
Opera(欧朋) 的前缀 -o-
国内的浏览器的内核是谷歌。
三 布局
-
流式布局 float+margin
-
定位
-
双飞翼
-
圣杯
-
弹性盒子布局 移动端布局
全称叫弹性和模型：是由父级的弹性容器和子级的弹性子元素两者构造。
Display:flex;这个属性决定谁是弹性容器，他里面的子元素就是弹性子元素。
Flex 是弹性子元素在弹性容器中所占的份数。属性值是数字
-
表格布局
-
box-sizing：border-box；这个属性 让元素的实际宽度就等于设置width，即便有了padding和border只会向内挤压，元素的可利用空间变小。
转载于:https://www.cnblogs.com/aaaaap/p/9764783.html
扫一扫
4024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
