复习html和css知识笔记
2019-02-18 本文已影响0人
果木山
html和css复习笔记
- css样式的展现，是通过判断设置样式的权值来选择的，其中标签选择器权值为1，类选择器为10，id选择器为100；
- 块状元素，内联元素，内联块状元素三者的差别：
- 块状元素：
- 独占一行；
- 宽度为父级宽度的100%;
- 宽，高，行高，顶边距（marginTop），底边距（marginBottom），均可设置；
- 内联元素：
- 与其他元素在一行；
- 宽，高，行高，顶底边距，均不可设置；
- 宽高为它包含的文字或图片的宽高；
- 内联块状元素：（input）
- 与其他元素在一行；
- 宽，高，行高，顶底边距，均可设置；
- 块状元素：
- border简写：
border: 1px solid red;；分解：border-width；border-style；border-color； - css盒子模型：width height padding border margin;
- css布局模型：流动模型（flow），浮动模型（float），层模型（layer）
- 流动模型：块状元素自上而下垂直分布；内联元素，内联块状元素自左而右水平分步；
- 浮动模型：脱离文档流，左右浮动；
- 层模型：绝对定位，相对定位，固定定位，脱离文档流；
- 绝对定位：相对于其最接近的一个具有定位属性的父包含块进行绝对定位；定位属性可以是相对定位，也可以是绝对定位；如果没有定位属性，则相对于body元素；
- 相对定位：相对于自己的位置定位，原来的位置保留；
- 固定定位：相对于视图（屏幕内的网页窗口）定位；
- 代码：
- 斜体设置：
font-style: italic，去除斜体属性：font-style: normal; - 字体和行高的缩写：
font-size: 20px;line-height: 1.5em;缩写为：font: 20px/1.5em;
- 斜体设置：
- 单位：
- em是指跟本元素的fontSize值有关；如果设置fontSize单位为em，则与其父级元素的fontSize有关；
- 元素的水平居中问题：
- 内联元素，内联块状元素：给父级元素设置
text-align:center; - 块状元素：
- 定宽块状元素：设置
margin: 0 auto；即设置margin-left和margin-right值为auto； - 不定宽块状元素;
- 利用table标签的长度自适应特点；
- 用table,tbody,tr,td标签将不定宽的块状元素包裹起来；
- table标签设置
margin: 0 auto;，居中对齐；
- 将块状元素转化为内联块状元素，然后给其父级设置
text-align: center居中对齐；
- 利用table标签的长度自适应特点；
- 定宽块状元素：设置
- 内联元素，内联块状元素：给父级元素设置
- 层级z-index
- 普通元素：没有定位属性，设置层级值是无效的；层级关系会根据流动顺序进行判断，后面的元素会覆盖前面的元素；
- 定位元素：设置定位属性的元素，设置层级才会有效；
- 如果不设置层级，定位元素会按照流动顺序进行覆盖，后面的定位元素覆盖前面的定位元素；
- 如果设置层级，根据层级的大小进行覆盖；层级为负值，则会被普通元素覆盖；
- 默认情况下定位元素会覆盖普通元素；
- 板块布局
- 简单的列布局：
- 普通的两列布局，三列布局：通过定宽和设置浮动来实现几列布局，设置宽度为a%，来进行比例控制，可根据屏幕的大小，自由伸缩；
- 特殊的列布局：利用定位（或浮动）来实现
- 一侧定宽，一侧自适应宽度的列布局
- 两列布局必须设置一个容器，容器的宽度为100%，即浏览器窗口的宽度；
- 定宽的布局通过定位实现：设置绝对定位，容器设置相对定位，通过left和top进行定位；
- 定宽的布局也可以通过浮动来实现；只需设置左浮动；
- 自适应宽度的布局，宽度不设置，设置高度等，最终要的是要设置margin-left，其值为定宽布局的宽度；
- 一侧定宽，一侧自适应宽度的列布局
- 简单的列布局：
- padding解读
- 对于内联元素，设置padding，在水平方向，能够设置上，距离会增加，垂直方向上，间距不会增加，不会影响垂直方向上的其他元素，但是自身的背景色在垂直方向会扩充；
- padding设置的百分比均是相对于其宽度而言，如:
height:50%;即，高度值为宽度的百分之五十； - 利用padding获取一个正方形的视图，设置
padding: 50%;则可获得一个正方向视图；- 利用绝对定位（四方位均为0）和margin:auto来实现，水平和垂直方向上的同时居中对齐；
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>padding</title> <style> *{ margin: 0; padding: 0; } .container{ padding: 50%; position: relative; } .box{ width: 200px; height: 200px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url("img/p1.jpg") center no-repeat; background-size: auto 100%; margin: auto; } </style> </head> <body> <div class="container"> <div class="box"></div> </div> </body> </html> - 背景色的填充设置：background-clip
- border-box:填充到边框以内，包含边框；默认值；
- padding-box:填充到padding以内，包含padding区域；
- content-box:填充到内容区域，不包含padding；用于padding作为分界线，内容区域颜色填充；
- margin解读
- padding也可实现上下留白，但是兼容性不好，只能在chrome中可以实现，而margin的兼容性很好，使用其可以上下留白。
- margin设置的百分比值
- 普通元素：百分比是相对于容器的宽度计算的；
- 定位元素：百分比是相对于第一个定位祖先元素宽度计算的；
- 实际开发中的应用：宽高2:1的自适应矩形；代码：
div{margin: 50%;};
- 元素的垂直居中问题：
- 通过代码
writing-mode: vetical-lr；更改流为垂直方向，此时垂直方向才会被充满，然后设置垂直方向上的auto，元素才会垂直居中，由于更改了流动方向，所以，水平方向不能充满，不能通过auto居中； - 利用绝对定位的拉伸特性；让元素水平，垂直方向全部填满；然后设置宽高值，进行margin:auto，就可以实现水平和垂直方向上的同时居中；
- 通过代码
- overflow解读
- 浏览器的滚动条，是设置在html标签上，不是设置在body标签上；如果清除浏览器的滚动条，则给html标签设置
overflow:hidden即可； - 触发BFC(块状格式化上下文)
- 清除浮动带来的父级元素的高度塌陷问题；
- 父级元素与第一个子元素会出现margin重叠问题，添加overflow可解决重叠问题；
- overflow的失效问题
- overflow设置在绝对定位元素和其父级包含块之间时，会失效；父级包含块可以是body;
- 解决失效问题
- overflow设置的元素自身设置定位属性，作为绝对定位元素的父包含块；
- overflow设置的元素的子元素为父包含块，即用一个子元素div包裹上绝对定位元素；
- 依赖overflow的样式表现
- resize拉伸特性，必须依赖overflow才能呈现；
- resize的三个特性：horizontal水平拉伸；vertical垂直拉伸；both水平垂直方向均可拉伸;
- overflow的设置，除了visible不能设置，其他的都能设置，如auto,scroll,hidden;
- resize拖拽标志默认为17像素*17像素；
- ellipsis省略特性，必须依赖overflow:hidden才能呈现；
- 代码：
div{ width: 200px; height: auto; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
- resize拉伸特性，必须依赖overflow才能呈现；
- 锚点技术：css实现锚点定位和JS实现锚点定位
- css实现锚点定位：分为两种
1）URL地址中的锚链与锚点元素对应并有交互行为：常见的a标签中的href锚链，id锚点；
2）可focus的锚点元素处于focus状态：label触发input的focus状态； - JS实现锚点定位：通过JS调整scrollTop实现；
- 参考链接：css实现锚点定位
- css实现锚点定位：分为两种
- 浏览器的滚动条，是设置在html标签上，不是设置在body标签上；如果清除浏览器的滚动条，则给html标签设置
- absolute解读
- 无依赖的absolute功能更强大：不依赖relative，不设置left/right/top/bottom，通过margin-left/margin-right来实现位置移动；
- 特性：1）脱离文档流；2）宽高不占据任何尺寸；3）跟随前面元素显示；
- 实际应用
1、通过absolute实现图片的无依赖定位；
2、通过absolute实现居中和边缘定位：通过添加 空格 ，定位元素为设置为内联元素或内联块状元素；然后在父级容器设置text-align:center/right来居中或边缘定位，然后定位元素设置margin-left和margin-top为负值，来实现位置移动；
3、各种对齐溢出技巧实例
+ 通过绝对定位使星标不占据位置；不影响文档正常显示；
+ 通过绝对定位可以在任意位置添加图标和图片；因其不占据任何尺寸；
+ 通过绝对定位可使文字溢出容器； - 充满全屏代码：
position: absolute;left:0;right:0;top:0;bottom:0;
- float解读
- 浮动的两大特性：1）包裹性；2）破坏性；（容器高度塌陷）
- 清除浮动对父级元素的影响：两大基本方法
- 父级元素BFC：与外界隔绝，不会出现margin重叠现象；即设置overflow;
- 在父级元素底部，添加块状元素，设置代码
clear:both；跟外界元素有关联，会出现margin重叠现象；
- clear应用形式
- 在父级元素底部添加空的div，div中设置
clear:both;缺点：会出现裸露的div，影响代码美观； - 添加after伪类元素；缺点：IE6/IE7不支持；
- 兼容的清除浮动的代码：其中clearfix类名添加到设置浮动元素的父级元素标签上；
//IE6/IE7 .clearfix{ *zoom:1; } //IE8+ .clearfix:after{ display: block; content: ""; height: 0; overflow: hidden; clear: both; }- 实际开发中的简化代码
//IE6/IE7 .clearfix{ *zoom:1;//添加*的目的是，只有在IE7及以下浏览器中才会支持非字母数字前缀的属性，在IE8+中不支持； } //IE8+ .clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{ clear:both; } - 在父级元素底部添加空的div，div中设置
- line-height解读
- line-height的取值：
- number类型，即
line-height: 1.5指的是当前元素的font-size大小的1.5倍； - 长度值：具体的长度和百分比值，如1.5em,1.5rem,150%;
- number类型，即
- 取值1.5和150%/1.5em的区别：
-
line-height: 1.5指的是所有可继承的元素根据自身的字体大小重新计算； -
line-height: 150%/1.5em指的是当前元素根据自身的字体大小计算出数值，然后继承给子级元素；
-
- 行高与图片
- 默认情况下，图片的下边缘会跟文字的基线对齐；所以会出现图片下方有留白（IE7以下不存在）；
- 解决方法：
- 给图片的父级容器设置行高为0；
- 给图片设置
vertical-align: bottom; - 图片块状化，设置
display:block;
- line-height的取值：
- vertical-align解读
- vertical-align百分比值是根据line-height值计算的；
- 如果未设置行高，父级容器的基线不在中心线上，会在第一行文字的基线上，设置行高与高度值相同，基线的位置才会在容器中心线附近；
- 支持vertical-align的有inline元素和inline-block元素，block元素不支持；
- 浮动和定位会是元素block化，不支持vertical-align；
- 取值：
- 长度或百分数
- top/bottom/middle
- top: 元素的顶部与父级容器的顶部对齐，跟容器的高度有关；
- bottom: 元素的底部与父级容器的底部对齐；
- middle: 元素的中心线与父级容器基线上1/2x-height对齐；即会与父级容器的中心线向下偏离，文字的越大，向下偏离越大，解决偏离问题，则设置font-size值为0；要想使元素垂直居中，必须设置行高与高度相同；
- text-top/text-bottom：比较的是元素的盒子顶底部与父级容器的content-area内容区域的顶底部对齐；
- 父级容器的content-area内容区域的高度，只与其font-size和font-family有关；与其他的无关；
- 元素的对齐方式只与父级容器的content-area有关，与父级容器的行高，和周围元素的垂直对齐属性无关；
- 实际应用：图标与文字的对齐效果
- 采用基线对齐的方式，问题：图标会明显高于文字；
- 采用middle对齐方式，问题：会有偏离，跟文字的大小有关，文字越大，偏离越明显，而且兼容性不好；
- 采用top/bottom对齐方式，问题：会受父级容器高度的影响；
- 采用text-bottom对齐方式，图标不会受父级容器高度的影响，也不会受到其他元素的影响；
- sub/super：上下标设置
- 注：容器内元素的设置只与父级容器元素有关，各元素之间不会互相影响；
- 注：尽量不要使用middle,兼容性不好，可以使用负值，进行垂直定位；
