![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 67
yooo*
想翻身的咸鱼
展开
-
CSS栅格系统
CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统,这意味着它可以同时处理列和行。栅格系统与FLEX弹性布局有相似之处,都是由父容器包含多个项目元素的使用。由于兼容性并不强,效率也并未得到很大提升,因此目前不太普及。1.声明栅格系统的容器display: grid(块) | inline-grid(行)article { display: grid; width: 300px; height: 300px; border: s原创 2022-02-11 15:45:54 · 1297 阅读 · 0 评论 -
CSS弹性盒模型
Flex 是 Flexible Box 的缩写,意为"弹性布局",可以轻松的控制元素排列、对齐和顺序的控制。现在的终端类型非常多,使用弹性盒模型可以让元素在不同尺寸终端控制尺寸。1.弹性布局与传统布局相应对比<body> <main> <nav> Yooo </nav> <article> Alison </art原创 2022-02-09 14:59:35 · 1148 阅读 · 0 评论 -
CSS定位布局
定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。1.相对定位position: relative相对定位:从当前位置添加定位(当前位置是保留的)* { padding: 0; margin: 0;}p { border: solid 5px blueviolet; width: 400px; height: 400px; padding: 30px;}p img原创 2022-01-23 17:28:27 · 350 阅读 · 0 评论 -
CSS浮动布局
CSS浮动布局float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。float: left | right | none1.文档流指元素在排版布局的过程中,元素会自动从左到右,从上到下的流式排列。添加浮动会脱离文档流,对后续元素产生影响。(1)空间丢失第一个div设置浮动,第二个未设置。第一个会脱离文档流,第二个div向前填充。div { width: 200px;原创 2022-01-21 17:13:04 · 4426 阅读 · 0 评论 -
CSS操作数据内容样式
CSS操作数据内容样式1.表格(1)CSS定制表格display:table...表格可以非常快速的部署数据,灵活控制表格样式是必要的。样式规则说明table对应 tabletable-caption对应 captiontable-row对表 trtable-row-group对应 tbodytable-header-group对应 theadtable-footer-group对应 tfoot<article class=原创 2022-01-19 16:12:08 · 759 阅读 · 0 评论 -
CSS盒子模型
CSS盒子模型网页布局三大核心:盒子模型、浮动和定位网页布局过程:先准备好网页元素,网页元素基本都是盒子Box利用css设置盒子样式往盒子里面装内容网页布局核心本质:利用css摆盒子1.盒子模型组成就是把HTML页面中元素看作是一个矩形的能盛装内容的盒子,CSS盒子模型本质上是一个盒子封装周围的HTML元素。它包括:边框(border)、外边距(margin)、内边距(padding)和实际内容(content)2.边框(border)边框由三部分组成:边框宽度(粗细)、边框样式和边原创 2021-11-08 18:45:13 · 227 阅读 · 2 评论 -
CSS三大特性:层叠性、继承性、优先级
CSS三大特性层叠性、继承性、优先级1.层叠性相同选择器设置相同样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。原则:样式冲突,遵循就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠div { color: red; font-size: 20px;}div { color: pink;}/* 执行color: pink;和font-size: 20px; */<div>长江后浪推前浪</div>2.继承性原创 2021-11-08 18:43:16 · 161 阅读 · 0 评论 -
CSS背景
1.背景颜色background-color: transparent透明色(默认)|colordiv { width: 200px; height: 200px; background-color: transparent; background-color: pink;}2.背景图片实际开发常见于logo/一些装饰性的小图片/超大的背景图片,优点是非常便于控制位置。(精灵图也是一种运用场景)background-image: url(xxx) | none原创 2021-11-03 16:16:08 · 140 阅读 · 0 评论 -
CSS元素显示模式
指标签以什么方式进行显示HTML元素一般分为块元素和行内元素1. 块元素例:h1~h6,p,div,ul,ol,li等特点:霸道,独占一行高度、宽度、外边距以及内边距都能控制宽度默认是容器(父级宽度)的100%是一个容器及盒子,里面可以放行内或者块级元素注意:文字类元素内不能放块级元素p标签,h1~h6标签主要存放文字,因此p里面不能放块级元素,特别是div2. 行内元素(内联元素)例:a,strong,b,em,i,del,s,ins,u,span等特点:相邻的行内原创 2021-11-03 16:14:32 · 61 阅读 · 0 评论 -
CSS中使用Emmet语法
Emmet语法使用缩写,提高html/css的编写速度1.快速生成HTML结构语法输入标签名+tab键生成多个相同标签,使用标签名*个数父子关系用>兄弟关系用+带类名的 span.nav带id的 span#nav默认是div标签如果生成的标签类名是有顺序的,可以用自增符号$ (span.nav$*5)想要在标签中添加默认文字,使用{} (div{$*5})2.快速生成CSS样式语法简写形式,如:w200=width: 200px; lh26=l原创 2021-11-03 16:12:28 · 112 阅读 · 0 评论 -
CSS引入方式
1. 内部样式表(嵌入式)写到html页面内部,放到一个style标签里<style> div { color: red; font-size: 12px; }</style>2. 行内样式表(行内式)<p style="color: red; font-size: 16px;">粉红色的回忆</p>3. 外部样式表(链接式)开发中常用单独写到css文件中,再把css通过链接引入html:新建.css样式文原创 2021-11-03 16:11:09 · 50 阅读 · 0 评论 -
CSS文本属性
定义文本的外观:颜色,对齐,装饰,缩进,行间距…1. 文本颜色p { /* color: pink; */ /* color: #961179; */ color: rgb(255,0,0);}表示形式属性值预定义的颜色值red,green,blue…十六进制#FF0000,#FF6600RGB代码rgb(255,0,0),rgb(100%,0%,0%)开发中最常用十六进制2. 对齐文本text-align设置文本的水平对原创 2021-11-03 16:09:28 · 115 阅读 · 0 评论 -
CSS字体属性
1. 字体系列:font-familyh2 { font-family: '微软雅黑';}p { font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;}各种字体之间必须使用英文状态下的逗号隔开一般情况下,如果有空格隔开的多个单词组成的字体,加引号尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示多个字体:兼容性好,如果没有向后找2. 字体大小body { font-size:原创 2021-11-03 16:07:42 · 101 阅读 · 0 评论 -
CSS选择器分类(有例子非常全)
1.基础选择器单个选择器组成1)标签选择器指用HTML标签名称作为选择器,为页面中某一类标签指定统一的CSS样式。p { color: green;}div { color: pink;}缺点:不能设计差异化样式2)类选择器(开发最常用)差异化选择不同的标签,单独选择一个或者某几个标签口诀:样式点定义,结构类调用注意不能用标签当类名可以使用中横线不要使用纯数字,中文定义类名命名要有意义.red { color: red;}.gr原创 2021-11-03 16:04:27 · 1711 阅读 · 0 评论 -
CSS语法规范&代码风格
美化网页,布局页面层叠样式表/css样式表/级联样式表结构(HTML)和样式(CSS)相分离语法规范两部分组成:选择器{一条或多条声明(键值对);}p { color: red; font-size: 12px;}代码风格样式格式书写:展开式样式大小写:小写空格规范:属性值前面,冒号后面保留一个空格选择器和大括号中间保留空格...原创 2021-11-03 15:58:25 · 980 阅读 · 0 评论