css笔记

css笔记

特性

• 层叠性：指多种css样式的叠加，一般情况下，多个css样式设置同一个属性遵循就近原则。
• 继承性：子标签会继承父标签的某些样式，如颜色、字号。
• 优先级：多个选择器对同一个属性赋值时，优先级高的有效（!important>行内样式>id选择器>类选择器>标签选择器）

选择器

css单位：px：像素，em：一个字的距离；

选择器类型

• id选择器：#id
• 类选择器：.class
• 标签选择器：div
• 后代选择器：.class p
• 子代选择器：.class > p
• 交集选择器：div.class
• 并集选择器：div, p, span
• 伪类选择器：
  • :link：未访问的链接
  • :visited：已访问的链接
  • :hover：鼠标移动到的链接上
  • :active：选定的链接
• 通配符选择器：*

显示模式(display)

display可以转换元素类型，从而控制元素的不同显示默认，常见属性如下：

• inline：行内
• block：块
• inline-block：行内块
• none：隐藏

块级元素(block)

每个块元素通常都会独自占据一整行或者多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构，常见的块元素有：div，h1~h6，p，ul，ol，li等

块级元素特点：

• 总是从新行开始
• 高度、行高、外边距、内边距可以控制
• 宽度默认100%
• 可以容纳块元素或内联元素(但是p、h1~h6只能放文字，ul只能放li)

行内元素(inline)

行内元素(内联元素)不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可设置宽度、高度、对齐等属性，常用于控制页面中的文本样式，常见的行内元素有：span，a，strong，i，b，em，del，u等。一般行内元素只放行内元素。

内联元素特点：

• 和相邻内联元素在同一行
• 高宽设置无效，但可以设置水平方向的padding、margin
• 默认宽度为内容宽度
• 只能容纳文本或其他内联元素(但是a可以放块级元素，但不能放a)
• 一般可以当文本来控制

行内块元素(inline-block)

常见的有：img、input、td，它们具有以下特点：

• 和相邻行内元素或行内块元素在同一行，但是会有空隙
• 默认宽度是本身内容宽度
• 高、宽、边距可以控制
• 一般可以当文本来控制

文字图片

文字溢出隐藏：

• 溢出隐藏必须有overflow: hidden;
• 溢出隐藏必须设置元素的宽和高，当超出范围是，才会隐藏
• 只有块块级元素才能设置宽和高，而span是行内元素，要转换成块级或行内块

span{
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

文字与图片对齐，默认是基线对齐，可以修改：vertical-align: middle

行高，line-height：文本中的每一个字符都有一个不可见的框，这些框又被放在两条不可见的横线中（垂直居中），两条横线的距离就是行高，有3种设置方式：

• 直接设置：line-height: 30px；
• 相对值：line-height: 150%; font-size: 14px;相当于：14px × 150%；
• 比例：line-height: 1.5; font-size: 14px;相当于：14px × 1.50；

行高作用：

• 设置行间距；
• 单行文本垂直居中：因为文本在行中默认垂直居中，所以将行高设置为父元素的高度，就可以实现垂直居中

盒子模型

盒子大小构成：

• 盒子边框(border)
• 内边距(padding)
• 外边距(margin)

内外边距会撑大盒子。

盒子水平居中对齐：

• margin: 0 auto，行内元素和行内块元素可以用：text-align:center

盒子垂直居中对齐：

1. 设置父元素高度，
2. 修改position为relative或者absolute，
3. 设置top:50%,
4. 也可以设置margin-top:盒子高度一半；
5. 若盒子为百分比高度，可以设置：transform: translateY(-50%)

以上盒子的对齐方式可以使用flex布局，则会更简单。

外边距合并：相邻块元素垂直外边距会合并（以较大的外边距为准）

外边距塌陷：对于嵌套关系的块元素，若父元素没有上边距及边框，则给子元素设置上外边距会作用于父元素。解决方案：

• 给父元素定义上边框或上内边距，
• 给父元素设置overflow:hidden

盒子圆角：border-radius: 50%(IE8以下不支持)

盒子阴影：box-shadow:2px 2px 2px 2px red

浮动(float)

float:left浮动可以让多个块元素在同一行显示，方便布局，浮动元素在非浮动元素的前面。

特性

• 浮动只能左右浮动或者不浮动
• 浮动脱离标准流，不占位置，但是会影响标准流（但是浮动元素不会遮住文字）
• 浮动元素会找最近的父元素对齐
• 浮动元素具有行内块元素的特性

清除浮动(clear)

使用：clear: both

产生原因：在某些情况下，为了布局需要会给父块元素的每个子块元素设置浮动，但是由于子块元素高度不好确定，就不能给父块元素设置固定高度，此时的浮动就会导致父块元素高度为0，从而导致后面的元素布局出现问题，所以需要清楚浮动。

解决方法：

• 额外标签法：在浮动布局的最后添加一个清除浮动的div(<div style="clear:both"></div>)
• 父级添加overflow属性：给父元素添加overflow属性（overflow:hidden）(缺点：不能显示溢出的元素)
• 使用after伪元素

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

• 使用before和after双伪元素

.clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}

布局和版心

版心：网页的可视区，指网页中的主体内容。

布局流程：

• 确定版心
• 分析行、列模块
• 写html
• 写css

定位(position)

元素的定位属性主要包括定位模式和边偏移两部分。

边偏移：top、bottom、left、right；

定位模式：

• static：自定定位、静态定位，默认，用于取消定位。
• relative：相对定位，相对于原文档流输出位置定位，即相对于自身原先的位置移动（仍然占有原来占有的位置）。
• absolute：绝对定位，相对于最近的有定位的祖先元素定位（绝对定位不占位置），一般子级用绝对定位，父级用相对定位。
• fixed：固定定位，相对于浏览器定位，不占有位置

定位的盒子居中对齐：left: 50%; margin-left: -10px;

定位模式转换：元素添加了绝对定位或者固定定位之后，元素类型默认会转换为行内块模式，因此行内元素如果用了绝对或相对定位后，可以不用转换显示模式，直接给宽高就可以了。

叠放层次z-index:0：默认为0，取值越大，层叠时越往上，若取值相同，则后来居上。

显示与隐藏

display: none：隐藏元素，且不保留位置，不设置则显示；

visibility: hidden：隐藏元素，但保留位置，visible：显示；

overflow: hidden：溢出隐藏，visible：默认，总是显示，scroll: 显示滚动条，auto：自动；

flex布局

flex即弹性布局，一个盒子设置为flex布局后，float、clear、vertical-align属性将失效。

使用flex布局：display: flex;

行内元素使用flex布局：display: inline-flex;

webkit内核浏览器使用flex：display: -webkit-flex;

主轴方向

flex-direction

设置主轴方向，取值有：row(默认)、row-reverse、column、column-reverse

是否换行

flex-wrap

设置是否换行：

nowrap：不换行，默认；

wrap：换行；

wrap-reverse：换行，第一行在下方；

flex-flow

是flex-direction和flex-wrap的简写形式；

主轴对齐方式

justify-content

主轴对齐方式（以下假设主轴为从左到右）：

flex-start：左对齐，默认；

flex-end：右对齐；

center：居中；

space-between：两端对齐、平均分布（元素间间隔相等），两边无间距；

space-around：两端对齐、平均分布（元素间间隔相等），两边有间距。

交叉轴对齐方式

align-items

交叉轴对齐方式：flex-start、flex-end、center、baseline、stretch(默认)

子元素属性

• order：默认0，数值越小越靠前；
• flex-grow：放大比例(若有剩余空间，则按比例放大至占满空间)，默认0(不放大)，
• flex-shrink：缩小比例，默认1，取值0~1；
• flex-basis：占据的空间，默认auto；
• flex：上面三个缩写；
• align-self：设置自身对齐方式；

h5与css3

h5简介

参考教程：https://www.w3school.com.cn/html5/index.asp

h5特性：

• h5是html语言的第五次重大修改
• 所有主流浏览器都支持h5，（IE9支持部分功能，IE9以上是全部支持）
• 改变了用户与文档的交互方式：增加了多媒体标签：如video、audio、canvas
• 增加了新特性：语义特性、本地存储、网页多媒体、二维三维、特效（动画）
• 抛弃了一些不常用的标记和属性
• 新增了一些标记和属性
• 代码结构更加简洁

标签变化

常用的语义化标签：

• h5标签变化
• <header>：网页头部；
• <asider>：网页侧边栏；
• <nav>：导航栏；
• <main>：主体内容；
• <article>：独立完整的内容模块；
• <section>：段、节等；
• <footer>：底部内容；

多媒体标签

• audio：音频
• video：视频

input变化

新增的type属性类型：

• 详细文档；
• email：默认的提交方式添加了邮箱验证；
• url：默认的提交方式添加了网址验证；
• number：只能输入数字；
• search：更好的输入体验；
• range：范围选择器；
• color：颜色选择器；
• time、date、datetime-local：时间日期选择器；

新增的input属性：

• 详细文档；
• placeholder：文本提示；
• autofocus：自动获取焦点；
• autocomplete：自动填充；
• required：必填；
• pattern：正则验证；
• multiple：选择多个文件，填写多个邮箱(逗号分隔)等；
• form：是form标签外的input数据也可以使用默认提交；

新增的表单元素（支持有限，不使用）：

• 详细文档
• datalist：可输入、可选择输入框（不同浏览器支持不一样，不使用）；
• keygen：密钥对生成器
• output：只能显示，没用；

新增的表单事件：

• [详细文档](<https://www.w3school.com.cn/tags/html_ref_eventattributes.asp)
• oninput：当元素获得用户输入事件；
• oninvalid：验证不通过事件；

获取dom及自定义属性

自定义属性以及获取dom元素示例：

<!-- 必须data-开头，多单词用-分隔，只能使用小写字母，不能纯数字，不能有特殊符号 -->
<p data-xx-yy="xxxxx">段落</p>
</p>
<script>
    window.onload = function(){
        // 只获取满足条件的第一个
        var ele = document.querySelector("li")
        // 获取满足条件的所有元素
        var eles = document.querySelectorAll("li")
        // 获取自定义属性
        var p = document.querySelector("p")
        var val = p.dataset["xxYy"]
        console.log(val)//xxxxx
    }
</script>

css3选择器

属性选择器

css3中新增属性选择器：E[attr]或者E[attr=val]，示例：

• 属性值完全匹配：div[name=aaa]
• 属性值包含匹配：div[name*=aaa]
• 属性值前缀匹配：div[name^=aaa]
• 属性值后缀匹配：div[name$=aaa]

伪类选择器

以某元素相对于父元素或兄弟元素位置来获取元素的结构伪类，示例：

• .aa + div：选择与.aa元素相邻的div元素；
• .aa ~ div：选择所有.aa元素的兄弟div元素；
• li:first-child：选择li元素的父元素中的第一个元素；
• li:last-child：选择li元素的父元素中的最后一个元素；
• li:first-of-type：选择li元素的父元素中的第一个li元素；
• li:last-of-type：选择li元素的父元素中的最后一个li元素；
• li:nth-child(n)：选择li元素的父元素中的第n个元素；
• li:nth-of-type(n)：选择li元素的父元素中的第n个li元素；
• 说明：上面两个的括号中，也可以直接写n或者关于n的表达式，n取值为0~n-1；且当表达式的的值为负值时，则无效；
• h2:target：选择当前锚点选中的目标h2元素；

伪元素

伪元素（:before、:after）在功能上完全等价于一个dom元素，但是它不会在dom树中生成；伪元素具有以下特性：

• 设置样式时，必须设置content；
• 默认是一个行内元素，需要转换成块或者设置定位才能设置宽高；
• 由于伪元素不在dom树中生成，所以无法通过js操作；

其他伪元素：

• :first-letter：选择首字；
• :first-line：选择首行；
• :selection：选择鼠标选中的文字；

盒子

css中盒子的默认宽高=设置的宽高+border+padding；这使得在计算盒子大小时非常麻烦和容易出错，所以css3中添加了box-sizing属性，可设置为content-box(默认)或border-box(设置的宽高包含border和padding)