![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端css
文章平均质量分 50
小虾仁she
这个作者很懒,什么都没留下…
展开
-
css-17.flex布局
基本概念flex容器使用flex布局的元素,称为flex容器其方式是将display属性设置为flex、inline-flexflex项目flex容器的子元素称为flex项目flex容器的属性displayflex:容器为块级元素inline-flex:容器为行内元素flex-direction设置主轴的方向属性值:row、row-reverse、column、column-reverse默认值:rowflex-wrap设置项目如何换行属性值:wrap、wrap-reve原创 2021-03-05 12:36:36 · 96 阅读 · 1 评论 -
css-16. BFC和IFC
相关概念块级元素CSS属性值display为block、list-item、table的元素块级盒每个块级元素都会至少生成一个块级盒,称为主块级盒;一些元素可能会生成额外的块级盒,比如 li ,用来存放项目符号行内元素CSS 属性值 display 为 inline、inline-block、inline-table 的元素。行内盒所有的非替换元素( display 值为 inline )生成的盒都是行内盒所有的可替换行内元素( display 值为 inline-block 或 inli原创 2021-03-05 12:36:21 · 79 阅读 · 1 评论 -
css-13. 定位
定位脱离文档流的常用三种方式:浮动、绝对定位、固定定位position:设置定位方式relative:相对定位absolute:绝对定位fixed:固定定位static:静态定位(默认值)相对定位相对定位:相对元素原有位置进行定位设置position为relative后,会激活top、bottom、left、right四个属性。其中top和left的优先级更高top、bottom、left、right:正值:向中心方向偏移赋值:向边缘方向偏移特性:相对定位元素没有脱离文档流原创 2021-03-05 12:35:56 · 1122 阅读 · 1 评论 -
css-15. css单位
桌面浏览器浏览器窗口、视口等相关概念视口:包括滚动条html根元素:视口可以看成html元素的父容器,默认情况下,html的宽度等于视口的宽度CSS单位%:相当于父容器宽高的百分比px:像素单位in:英寸单位cmmmptpcem:取决于容器的字体大小,1em=容器.font-sizerem:取决于根元素html的字体大小,1rem=html.font-sizeex:取决于x字母的高度,1ex=x-heightvw:取决于视口宽度,1vw=视口宽度的1%vh:取决于视口高度,原创 2021-03-05 12:35:34 · 121 阅读 · 1 评论 -
css-12. 背景
背景属性background-color:设置背景颜色,应用到borderbackground-image:设置背景图片,从padding开始渲染,设置平铺后会应用到borderbackground-repeat:设置背景平铺no-repeatrepeat默认值repeat-xrepeat-ybackground-position:用于背景定位(从padding开始定位)数值法:background-position:100px 200px; 向右平移100px,向下平移200原创 2021-03-05 12:35:16 · 168 阅读 · 1 评论 -
css-11. 浮动
浮动规则块级元素的盒子会发生遮盖现象元素的内容不会发生遮盖(可以用以实现文字环绕)浮动特征浮动的元素从左到右(从右到左)紧密排列浮动的元素具有块级元素的特征(可以设置宽高、margin、padding),但没有换行符浮动的元素不存在margin塌陷问题浮动的元素脱离了标准流,不再占有原来的位置–>子元素设置浮动之后,父元素如果没有设置高度,会呈现塌陷的效果浮动的元素自适应宽度为包裹内容的宽度以上特性不止针对块级元素<!DOCTYPE html><html原创 2021-03-05 12:34:55 · 59 阅读 · 1 评论 -
css-10. 伪元素与伪类
伪元素不在文档树,但用户可以看到CSS2.1提供了两个伪元素:before 在元素前面插入文本:after 在元素后面插入文本注意:伪元素必须添加content样式,伪元素可以像普通文本元素一样设置样式例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w原创 2021-03-05 12:34:35 · 96 阅读 · 1 评论 -
css-9. 标准文档流
特征文本类的内容有空白折叠现象文本类的内容基于底线(中文)或baseline基线(英文)对齐文本类的内容超过了盒子宽度会自动换行标签分类标签可以以两种方式分类:容器级和文本级块级和行内级块级元素所有容器级标签和p标签都是块级元素,eg:div,h1-h6,p可以设置宽高如果没有设置宽度,宽度将会是父级宽度的100%。如果设置了宽高,容器宽高将是设置的大小。如果内容宽度大于所设置的宽高,容器实际宽高将时内容的宽度(容器width和height还是设置的宽高)默认具有换原创 2021-03-04 23:08:30 · 57 阅读 · 1 评论 -
css-8. 盒模型
所有html元素都可以看成盒模型组成content 内容padding 内边距border 边框margin 外边距分类css3中可以利用box-sizing定义盒子模型类型属性content-box:标准盒模型border-box:怪异盒模型(IE低版本会使用)标准的盒模型设置width、height为内容content的宽高元素的宽度和高度:width|height+padding+border+margin大多情况下,默认margin不为0px,padding和bo原创 2021-03-04 23:06:31 · 122 阅读 · 1 评论 -
css-7. 列表样式
列表样式list-style-type:设置列表项目符号类型list-style-image:设置列表项目符号为图片,使用url(“图片路径”)引入list-style-position:设置列表项目符号相对li的位置list-style:复合属性以上属性可以为ul、ol、li设置...原创 2021-03-04 23:05:13 · 98 阅读 · 1 评论 -
css-6. 文字样式
文字样式color:文字颜色font-size:文字大小。可以使用单位(px,em,rem),也可以使用英文large 、larger、small、smaller、mediumfont-family:字体。设置字体时,可以设置多个字体,用逗号隔开。如果第一个字体有效,则使用第一个字体的样式font-family:"隶书","宋体";font-style:字体样式。italic为斜体,normal为正常font-weight:设置文字加粗效果。bold为加粗,normal为正常line-hei原创 2021-03-04 23:04:17 · 156 阅读 · 1 评论 -
css-5. 颜色表示法
颜色表示法十六进制以#开头,每两位代表一种颜色,分别是三原色red、green、blue例如:#000000 黑色#ff0000 红色#ffffff 白色简写法:0=00,f=ff,a=aa#000=#000000#f00=#ff0000rgb表示法rgb(r,g,b):其中r,g,b是0-255之间的数字来表示例如:rgb(0,0,0) 黑色rgb(255,0,0) 红色rgb(255,255,255) 白色r,g,b也可以用百分比表示,但是不建议使用,因为浏览器兼容性不好原创 2021-03-04 23:02:26 · 148 阅读 · 1 评论 -
css-4. 继承与层叠
继承性在css中,有一些属性,如果给父级元素设置了,那么它的后代元素将会继承这个属性。文字属性可以继承,盒子属性不可以继承文字属性:color、font-系列、line-系列、text-系列盒子属性:background-系列、width、height、border-系列、浮动、定位等选择器的权值选择器的针对性越强,权值越高–>优先级越高权值排序:!important>行内样式>id>类|伪类|属性>标签>通配符选择器权值通配符0原创 2021-03-04 23:01:22 · 67 阅读 · 1 评论 -
css-3. 代码规范
css代码规范选择器与 { 之间必须加一个空格属性与 : 之间不能有空格,而属性值则必须有 font-size: 50px;当一组样式包含多个选择器时,每组选择器必须独占一行 p, .news, .iphone{ }属性必须独占一行,以分号结尾...原创 2021-03-04 22:59:50 · 45 阅读 · 1 评论 -
css-2. css选择器
css选择器用于筛选符合条件的标签通配符(全局)选择器格式: *{ 样式:样式值; }常用用法:清除默认样式 *{ <!--清空list标签的默认样式--> list-style:none; <!--清空list标签的type属性的默认设置--> list-style-type:none; }标签选择器匹配文档中该类型的元素格式: 标签名{原创 2021-03-04 22:57:30 · 90 阅读 · 1 评论 -
css-1. 引入CSS
引入CSS的四种方式行内式:直接使用html标签的style属性<h1 style="color: green;text-align: center;">hello</h1>内嵌式:在head标签内,使用style标签引入css<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&l原创 2021-03-04 22:56:39 · 73 阅读 · 1 评论