![](https://img-blog.csdnimg.cn/2020121317333191.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS3
文章平均质量分 61
CSS
酒涩博客
专属你的Java技术交流博客
展开
-
CSS之定位
CSS之定位1、定位组成1.1、定位模式1.1.1、静态定位1.1.2、相对定位1.1.3、绝对定位1.1.4、子绝父相1.1.5、固定定位1.1.6、粘性定位2.2、边偏移定位总结定位层叠次序元素可以在盒子内自由移动,并且压住其他盒子。1、定位组成将盒子定在某一个位置,按照定位的方式移动摆放布局盒子。定位 = 定位模式+边偏移1.1、定位模式定位模式决定元素的定位方式选择器 { position: 属性;}1.1.1、静态定位默认定位方式,无定位意思语法:选择器 { po原创 2021-01-28 21:19:17 · 322 阅读 · 0 评论 -
CSS之浮动
CSS之浮动1、普通流(标准流)2、浮动2.1、浮动特性2.2、浮动元素经常和标准流的父级一起搭配使用3、常见网页布局3.1、浮动元素经常和标准流的父级一起搭配使用3.2、一个元素浮动了,理论其他兄弟元素也要浮动4、清除浮动4.1、清除浮动的方法4.2、清除浮动-额外标签法4.3、清除浮动-父级添加overflow4.4、清除浮动-after伪元素法4.5、清除浮动-双伪元素传统网页布局的3种方式1、普通流(标准流)标签按照规定好的默认方式排列。块级元素独占一行,从上到下顺序排列div、hr原创 2021-01-28 21:16:47 · 317 阅读 · 0 评论 -
CSS盒子边框及其阴影
1、圆角边框在CSS3中新增,将盒子修饰为圆角的。 border-radius:length(10px);// length为圆的半径length越大,盒子的弧度越圆如果为正方形,想设置为圆形,则半径设置为正方形盒子高度的一半或者50%px。如果是矩形,想设置圆角矩形,则将半径设置为高度的一半该属性是一个简写属性,可以设置4个值:左上角,右上角,右下角,左下角。写2个属性则对角线的属性是一致的。2、盒子阴影box-shadow属性设置盒子的阴影。box-shad原创 2021-01-28 21:14:31 · 1555 阅读 · 0 评论 -
CSS盒子模型
1、网页布局本质1.1、页面布局的过程先准备好相关的网页元素,网页元素基本都是盒子利用CSS设置好盒子样式,然后摆到相应的位置往盒子里面装内容。网页布局的核心本质:利用CSS摆放盒子。2、盒子模型组成盒子模型:将HTML页面中的布局元素看作矩形盒子。border边框content内容padding内边距margin外边距3、边框(border)border设置盒子的边框的宽度(粗细)、边框的样式、边框的颜色border:border-width原创 2021-01-08 13:39:05 · 290 阅读 · 0 评论 -
CSS三大特性
CSS三大特性:层叠行、继承性、优先级。1、层叠性相同选择器给设置相同的样式,此时一个样式就会被覆盖(层叠)另一个冲突的样式。层叠性主要是解决样式冲突的问题。层叠性原则:样式冲突,遵循的原则就是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠。2、继承性继承:子标签继承父标签的某些样式,文本颜色,字号等。恰当的使用继承可以优化我们的代码,降低CSS样式的复杂性。子元素可以继承父元素的样式字体颜色属性 (text-、font、line、以及color属性)原创 2021-01-08 13:37:27 · 802 阅读 · 0 评论 -
CSS背景及其背景图片的设置
CSS设置背景及其背景图片1、背景颜色2、背景图片3、背景平铺4、背景图片的位置4.1、参数为方位名词4.2、参数是精确单位4.3、使用混合单位5、背景图像固定5、背景属性简写6、背景颜色半透明7、总结通过CSS背景属性,可以给页面元素添加背景样式。背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等。1、背景颜色background-color属性定义元素背景颜色。background-color: 颜色值;一般情况下默认值为透明transparent(透明),我们也可原创 2020-12-31 08:05:24 · 2779 阅读 · 1 评论 -
CSS元素三种显示模式
CSS元素显示模式块元素行内元素行内块元素元素模式的转换小工具 snipaste元素显示模式就是元素(标签)以什么方式进行显示,比如独占一行,比如一行可以放多个。作用能够更好的布局网页。HTML元素一般分为块元素和行元素两种类型。块元素等特点:独占一行。宽度高度内外边距可以控制。是一个容器及盒子,里面可以放行内或者块级元素。注意:文字类元素内不能放块级元素。里面不能放其他块级元素也不能放其他块级元素行内元素等也称为内联元素。特点:相邻行内元原创 2020-12-31 08:02:39 · 1147 阅读 · 0 评论 -
复合选择器
希望大家能够持续关注、点赞以及评论我的博客,以及我的博客网站,一起交流更多的IT技术!!!不负韶华,砥砺前行!酒涩博客-专属你的IT交流博客!复合选择器希望大家能够持续关注、点赞以及评论我的博客,以及我的博客网站,一起交流更多的IT技术!!!不负韶华,砥砺前行![酒涩博客-专属你的IT交流博客!](http://echo.ataoli.cn/)1、后代选择器2、子选择器3、并集选择器4、伪类选择器、4.1、链接伪类选择器、5、focus伪类选择器在CSS中,根据选择器的类型将选择器分为基础选择器和复合选原创 2020-12-21 18:04:14 · 1296 阅读 · 0 评论 -
CSS三种引入方式
CSS三种引入方式内部样式表(嵌入式引入)行内样式表(行内式引入)外部样式表(链接式引入)步骤:按照CSS样式书写的位置(或者引入的方式),CSS样式分为三大类。内部样式表(嵌入式引入)<style> div { color: red; font-size: 15px; }</style>行内样式表(行内式引入)行内样式表(内联样式表)是在元素标签内部设置元素的样式。<p style=“ color:red; font-size:20px”>原创 2020-12-21 14:09:10 · 1619 阅读 · 0 评论 -
CSS字体、文本样式属性
CSS字体、文本样式属性1、字体属性1.1、修改字体样式属性语法:1.2、字体大小属性1.3、字体粗细属性1.4、字体样式属性1.5、字体复合属性2、文本外观属性2.1、文本颜色2.2、对齐方式2.3、装饰文本2.4、文本缩进2.5、行间距1、字体属性CSS-Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。1.1、修改字体样式属性CSS使用 font-family属性来定义字体语法:p { font-family:‘宋体’;}多种字体之间必须使用英文状态下的原创 2020-12-14 14:10:17 · 3345 阅读 · 0 评论 -
CSS概述及其选择器的使用
CSS概述及其选择器的使用1.1、什么是CSS1.2、CSS发展史1.3、CSS语法规范2、CSS基础选择器2.1、选择器作用2.2、选择器分类(基础选择器)2.2.1、标签选择器:2.2.2、类选择器:2.2.3、id选择器(只能调用一次)2.2.4、通配符选择器1.1、什么是CSSCSS主要是美化网页,布局网页。CSS是层叠样式表的简称,有时候也称为CSS样式或者级联样式表。CSS主要用于设置HTML页面中的文本内容(字体,大小,对齐方式)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观原创 2020-12-13 17:27:50 · 3461 阅读 · 0 评论