CSS基础知识
文章平均质量分 62
CSS最基础的知识,前端页面的基石
传说中的懿痕
这个作者很懒,什么都没留下…
展开
-
CSS基础之添加样式
为网页添加样式文章目录为网页添加样式样式解释选择器声明块CSS代码书写位置样式解释h1{color:red;background-color: blue;text-align:center;}这样的一整个代码叫做一条CSS规则CSS规则=选择器+声明块选择器选择器: 选择元素,确定样式应用的范围id选择器,选择对应id值的选择器,在{}前写#id名选中该元素元素选择器,在{}前写上对应元素的名称类选择器,在{}前写.class值声明块声明块出现在{}中,包含很多声原创 2021-08-27 16:12:53 · 447 阅读 · 0 评论 -
CSS基础之常见的样式声明
常见的样式声明为方便展示,所有CSS代码写到head中文章目录常见的样式声明colorbackground-colorfont-sizefont-weightfont-familyfont-styletext-decorationtext-indentline-heightwidth 、heighletter-spacetext-aligncolor元素内部文字的颜色p{ color: 预设值/rgb/hex}预设值: 定义好的颜色单词color:blue;三原色,色值: 光学三原原创 2021-08-27 16:57:41 · 147 阅读 · 0 评论 -
CSS基础之选择器
选择器选择器的作用就是帮助你精准的选中想要的元素文章目录选择器简单选择器伪类选择器伪元素选择器选择器的组合选择器的并列简单选择器ID选择器通过#+ID名的方式选中对应的元素#name{color:black;}元素选择器顾名思义,指定元素名来选中元素div{width:100px;}类选择器通过给目标元素赋予’类’,通过 .类名的方式选中元素.less{width:10px;}通配符选择器*,选中所有元素,常用来同一设置样式,比如重叠样式*{原创 2021-08-28 15:04:47 · 259 阅读 · 0 评论 -
CSS基础之层叠
层叠声明冲突: 同一个样式多次应用到了同一个元素层叠: 解决声明冲突的过程,浏览器自动处理(权重计算),依次比较.如果在下面三个比较中,能比较出结果就停止文章目录层叠1. 比较重要性2. 比较特殊性3. 比较源次序应用1. 比较重要性重要性从高到低作者样式表: 开发者书写的样式表(1) 作者样式表中的!important 样式,表示最重要的样式,覆盖其他同类型样式(不建议使用)ol, ul { list-style: none !important;}(2) 作者样式表中的普通样原创 2021-08-28 15:36:34 · 48 阅读 · 0 评论 -
CSS基础之属性值的计算过程
属性值的计算过程一个元素,从所有属性都没有值,到所有属性都有值,整个计算过程,叫做属性值的计算过程文章目录属性值的计算过程继承属性值的计算过程特殊的两个CSS取值继承子元素会继承父元素的某些CSS属性通常,跟字体内容相关的属性和字体相关的属性都能继承(背景颜色,宽高不能继承)属性值的计算过程一个元素一个元素的渲染,顺序按照页面文档的树形目录结构进行渲染每个元素的前提条件: 该元素的CSS属性必须有值确定声明值: 参考样式表(作者样式表+浏览器样式表)中没有冲突的声明,作为CSS属性值层原创 2021-08-28 15:48:52 · 84 阅读 · 0 评论 -
CSS基础之盒模型
盒模型文章目录盒模型基础知识盒子的组成部分基础知识box: 盒子, 每个元素在页面中都会生成一个矩形区域(盒子)盒子类型:行盒, 即display等于inline的元素块盒, 即display等于block的元素行盒在页面中不换行,块盒独占一行,display默认值为inline,且不能继承.浏览器默认样式表中设置的块盒: 容器元素, h1~h6, p常见的行盒: span, a,img,video,audio盒子的组成部分无论是行盒还是块盒, 都由以下几部分组成,从内到外分原创 2021-08-29 15:10:24 · 104 阅读 · 0 评论 -
CSS基础之盒模型的应用
盒模型的应用文章目录盒模型的应用改变宽高范围改变背景图覆盖范围溢出处理断词规则空白处理改变宽高范围默认情况下,width和height设置的是内容盒的宽高衡量设计稿尺寸的时候,往往使用的是边框盒, 但设置宽高的时候,设置的则是内容盒宽高有两种方式:精确计算, 将边框盒,内容盒的尺寸计算出来,单独设置改变宽高影响的范围box-sizing: border-box;添加该样式后,宽高影响的范围将从默认的内容盒到边框盒改变背景图覆盖范围默认情况下, 背景覆盖边框盒.可以通过bac原创 2021-08-29 15:33:51 · 107 阅读 · 0 评论 -
CSS基础之行盒的盒模型
行盒的盒模型display:inline常见的行盒: 包含具体内容的元素span , strong, em , i , img, video, audio文章目录行盒的盒模型显著特点行块盒空白折叠可替换元素 和 非可替换元素显著特点盒子的大小沿着内容延申行盒不能设置宽高, 行盒的宽高取决于内容的多少, 字体的大小, 行高. 所以调整行盒的宽高, 应该使用字体的大小, 行高, 字体类型, 间接调整内边距(填充区)水平方向有效,垂直方向仅会影响背景,不会实际占据空间边框水平原创 2021-08-29 15:56:17 · 102 阅读 · 0 评论 -
CSS基础之常规流
常规流文章目录常规流前置知识常规流布局前置知识盒模型: 规定单个盒子的规则.视觉格式化模型(布局规则): 页面中的多个盒子的排列规则视觉格式化模型, 大体上将页面中盒子的排列分为三种方式:常规流浮动定位常规流布局常规流, 也叫文档流, 普通文档流,常规文档流所有元素, 默认情况下, 都属于常规流布局总体规则: 块盒独占一行, 行盒水平依次排列包含块:( containing block): 每个盒子都有它的包含块, 包含块决定了盒子的排列区域.绝大多数情况下, 盒子的包含块,原创 2021-08-29 16:35:16 · 106 阅读 · 0 评论 -
CSS基础之浮动
浮动文章目录浮动应用场景浮动的基本特点盒子尺寸盒子排列高度坍塌!!!应用场景文字环绕横向排列浮动的基本特点修改float属性为:left: 左浮动, 元素靠上靠左排列;float:leftright: 右浮动, 元素靠上靠右排列; float:right默认值为none当一个元素浮动后, 元素必定为块盒(更改display属性block)浮动元素的包含块. 和常规流元素一样, 为父元素的内容盒盒子尺寸宽度为auto时, 表示适应内容宽度(没有内容宽度为0)高度为au原创 2021-08-29 17:08:58 · 60 阅读 · 0 评论 -
CSS基础之定位
定位手动控制元素在包含块中的位置设置的css属性 position文章目录定位position属性相对定位绝对定位固定定位定位下的居中多个定位元素重叠时补充position属性默认值: static, 静态定位(不定位)relative: 相对定位absolute: 绝对定位fixed: 固定定位一个元素, 只要position的取值不是static,就认为该元素是一个定位元素.定位元素回脱离文档流(相对定位除外)一个脱离了文档流的元素:文档流中的元素摆放,会忽略脱离了文档流原创 2021-08-30 15:53:21 · 50 阅读 · 0 评论 -
CSS基础之其他的选择器
其他的选择器:first-child选择第一个子元素,li:first-child 表示选中li中的第一个li, 且被选中的该li元素必须是其父元素下的第一个子元素 <!-- 这种情况下first-child是不能选中li的. 因为li不是ul下的第一个子元素,如果去掉p元素就可以 使用first-child选中 --> <ul> <p>lorem1</p> <li></原创 2021-08-30 16:11:39 · 82 阅读 · 0 评论 -
CSS属性之其他的样式
其他的样式文章目录其他的样式透明度鼠标样式盒子隐藏背景图背景图和img的区别涉及的CSS属性透明度opacity, 它设置的是整个元素的透明度, 取值位0~1.0为完全透明,看不见. 1为完全不透明在颜色位置设置alhpa通道(rgba, 第四个参数为颜色透明度)color:rgba(0,0,0,.5)鼠标样式使用cursor设置比如 cursor:pointer , 详情属性请看这里盒子隐藏display:none, 不生成盒子, 但是可能改变盒子排版visibil原创 2021-08-30 16:57:16 · 98 阅读 · 0 评论