![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 53
m0_47761892
这个作者很懒,什么都没留下…
展开
-
Flex弹性布局
Flex 布局原创 2021-12-06 10:29:34 · 2787 阅读 · 0 评论 -
10-元素的定位
文章目录一、相对定位二、绝对定位三、子绝父相四、固定定位五、静态定位六、z-index属性一、相对定位相对定位就是相对于自己以前在标准流中的位置来移动格式: position: relative; 示例程序<style> *{ margin: 0; padding: 0; } div{ width: 100px; heig翻译 2020-05-19 10:36:30 · 198 阅读 · 0 评论 -
9-清除浮动
文章目录零、盒子高度问题一、清除浮动方式一二、清除浮动方式二三、清除浮动方式三四、清除浮动方式四五、清除浮动方式五六、清除浮动方式六七、清除浮动方式七零、盒子高度问题在标准流中内容的高度可以撑起盒子的高度<style> div{ background-color: red; } p{ width: 200px; height: 100px; ba翻译 2020-05-19 09:58:01 · 126 阅读 · 0 评论 -
8-盒子浮动
文章目录一、网页的布局方式二、浮动元素的脱标三、浮动元素贴靠现象四、浮动元素字围现象一、网页的布局方式网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的标准流(文档流/普通流)排版方式其实浏览器默认的排版方式就是标准流的排版方式在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版垂直排版, 如果元素是块级元素, 那么就会垂直排版水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版浮动流排原创 2020-05-19 09:43:25 · 186 阅读 · 0 评论 -
7-盒子模型
文章目录一、盒子模型二、边框属性三、内边距属性四、外边距属性一、盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。二、边框属性边框就是环绕在标签宽度和高度周围的线条边框属性的格式:1.按要素连写(分别设置四条边)border-width: 上 右 下 左;border-style: 上 右 下 左;border-color: 上 右 下 左;原创 2020-05-17 16:41:36 · 172 阅读 · 0 评论 -
6-CSS三大特性
文章目录一、继承性二、层叠性三、优先级四、优先级权重五、!important一、继承性什么是继承性?作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性示例代码: <style> div{ color: red; }</style><div> <ul> <li> <p>我是段落</p>原创 2020-05-16 18:44:42 · 145 阅读 · 0 评论 -
5-CSS常用属性
文章目录一、文字属性1.font-style2.font-weight3.font-size4.font-family5.文字属性缩写二、文本外观属性1.text-decoration2.text-align3.text-indent3.color4.letter-spacing5.word-spacing6.line-height7.text-transform8.text-indent9.white-space:10.text-shadow一、文字属性1.font-style作用: 规定文字样式.原创 2020-05-16 18:35:30 · 399 阅读 · 0 评论 -
4-伪选择器
文章目录一、伪类选择器二、属性选择器三、链接伪类选择器一、伪类选择器作用: 选中指定的任意标签然后设置属性格式:1.同级别的第几个:first-child 选中同级别中的第一个标签:last-child 选中同级别中的最后一个标签:nth-child(n) 选中同级别中的第n个标签:nth-last-child(n) 选中同级别中的倒数第n个标签:only-child 选中父元素中唯一的标签注意点: 不区分类型2.同级同类型的第几个:first-of-type 选中同级原创 2020-05-16 17:38:13 · 785 阅读 · 0 评论 -
3-关系选择器
文章目录一、交集选择器二、并集选择器三、后代选择器四、子代选择器五、后代和子代选择器六、兄弟选择器一、交集选择器交集选择器又称标签指定式选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格。作用:给所有选择器选中的标签中, 相交的那部分标签设置属性语法格式:选择器1选择器2{ 属性: 值;}注意点:选择器和选择器之间没有任何的连接符号选择器可以使用标签名称/id名称/class名称交集选择器仅仅作为了解, 企业开发中用的并不原创 2020-05-16 17:24:44 · 414 阅读 · 0 评论 -
2-基础选择器
文章目录一、标记选择器二、类选择器三、id选择器四、通配符选择器一、标记选择器标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式。基本语法格式如下:标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }例如: p{ font-size:12px; color:#666; font-family:“微软雅黑”;}上述CSS样式代码用于设置HTML页面中所有的段落文本——字体大小为12像素、颜色为#666、字体为“微软雅黑”原创 2020-05-16 14:59:11 · 653 阅读 · 0 评论 -
1-CSS基础
文章目录一、CSS发展历史二、样式规则三、引入CSS样式四、体验CSS一、CSS发展历史CSS概述CSS通常称为CSS样式或样式表,主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。如下图所示,图中文字的颜色、粗体、背景、行间距和左右两列的排版等,都是通过CSS控制的2. CSS发展历史CSS11996年12月W3C发布了第一个有关样式的标准CSS1。包含了font的相关属性、颜色与背景的相关属性、文字的相原创 2020-05-16 14:29:46 · 557 阅读 · 0 评论