![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
读书笔记#CSS权威指南
文章平均质量分 78
volit_
这个作者很懒,什么都没留下…
展开
-
CSS权威指南(十二)Flexbox
Flexbox是一种简单而强大的布局方式,通过flex可以指明空间的分布方式、内容的对齐方式和元素的视觉顺序,把不同的组件放置在页面中。Flexbox依赖父子关系,在元素上声明display:flex | inline-flex后,这个元素随之成为弹性容器,负责在所占空间内布置子元素(flex-item)。取值:flex-start | flex-end | center | space-between | space-around | space-evenly | stretch。原创 2023-01-28 13:19:07 · 795 阅读 · 0 评论 -
CSS权威指南(十一)定位
绝对定位的元素完全从文档流中移除,其位置相对容纳块确定,外边距的边界使用偏移属性划定。绝对定位的元素不围绕其他元素的内容流动,而其内容也不围绕定位元素流动。绝对定位元素的容纳块是position属性不为static的最近祖辈元素。如果position属性的值是relative或static,其容纳块由最近的块级、单元格或行内块级祖辈元素框体的内容边界划定。取值: static | relative | sticky | absolute | fixed。适用于:块级元素和置换元素。初始值:visible。原创 2023-01-27 15:16:02 · 458 阅读 · 0 评论 -
CSS权威指南(十)浮动
适用于:浮动元素当该属性的值为图片URL时,如果图片有透明部分,那么内容将按照透明部分填充。但是不是完全填充透明部分,而是填充与内容直接接触那一边的透明部分。取值:初始值:0.0适用于:浮动元素这个属性用于指定透明度为多少时,运行内容流入。原创 2023-01-26 19:28:34 · 405 阅读 · 1 评论 -
CSS权威指南(九)颜色、背景和渐变
通过CSS可以把元素的背景设置为纯色,也可以设为一个或多个图像,甚至还可以设为线性渐变吧或径向渐变。但是可以通过background-clip属性控制背景的延伸位置,它有四个属性:border-box,padding-box,content-box,text。如果没有对border属性设置颜色,那么border将会被设置为color属性设置颜色。该属性的用意和background-clip的意义差不多,都是指定背景图片的生效位置。使用background-position属性,可以指定背景图像的位置。原创 2023-01-12 13:34:04 · 1243 阅读 · 0 评论 -
CSS权威指南(八)基本元素框
默认情况下,元素的背景在边框的外边界处终止,不会延伸到外边距区域。同时元素的外边距可以设置为负值,设置为负值的外边距可能会使元素从父元素中冒出来,或者与其他元素重叠。默认情况下,元素的宽度指从左内边界到右边界的距离,元素的高度指从上内边界到下内边界的距离。一个边框可以有多重样式,与padding一样,也是上右下左的定义顺序,也同padding一样,可以使用单边属性设置单独一边的边框样式。内边距属性对行内元素的纵向不生效,也就是内边距不会改变行内元素的行高,但是对行内元素的背景可以看到内边距设置的效果。原创 2023-01-11 12:56:05 · 498 阅读 · 0 评论 -
CSS权威指南(七)视觉格式化
不管是什么元素,CSS都假定每个元素会生成一个或多个矩形框,我们称之为元素。各元素框的中心是内容区域,四周有可选的内边距、边框、轮廓和外边距。默认情况下,内容区的背景出现在内边距范围内。外边距区域始终都是透明的,因此透过它能看到父元素。内边距不能为负值,但是外边距可以。每个元素的框体都相对容纳块放置,简单的说,容纳块是元素框体的布局上下文。容纳块由离元素最近的那个生成列表项目或块级框的祖辈元素的边界构成。(2)CSS定义的一些行为和有用的概念。可以改变元素的显示方式。(3)行内框高度的确定。原创 2023-01-08 17:20:36 · 581 阅读 · 0 评论 -
CSS权威指南(六)文字属性
(1)缩进文本(text-indent属性把元素的第一行文本缩进指定的长度,缩进的长度可以可以是负值。这个属性通常用于缩进段落的第一行。text-indent作用于块级元素之上,缩进将沿着行内方向展开。text-indent属性的值可以是任意长度单位,包括百分数。百分数取值相对于父元素宽度。ps.text-indent属性会继承(2)文本对齐(控制元素中各文本的对齐方式。作用于块级元素。text-align不控制元素的对齐方式,只影响元素中的内容。(3)对齐最后一行(控制块级元素最后一行的对齐方式。原创 2023-01-07 21:54:14 · 354 阅读 · 0 评论 -
CSS权威指南(五)字体
font-family有两个必要的描述符,分别是font-family和src,前者用于指定该自定义字体的名称,后者指定该字体的资源路径。(8)假设找到一个基本匹配的字体,但是字体没有显示元素所需的全部信息,比如字体缺少版权符号,那么用户代理将回到第3步,搜索替代字体,再执行第二步。(9)最后,如果找不到匹配的字体,而且所有替代字体都试过了,用户代理将指定字体族中的默认字体,力争正确显示元素。(7)如果第二步没有找到匹配的字体,用户代理在同一个字体族中找到替代字体,然后回到第二步。设置字体的瘦体和胖体。原创 2023-01-06 20:07:19 · 732 阅读 · 0 评论 -
CSS权威指南(四)值和长度
all表示除direction和unicode-bidi之外的所有属性都从父元素上继承。CSS3中定义了几个“全局”关键字,规范中的每个属性都能使用:inhert、initial和unset。数字值是是整数或者实数,实数是指整数后面跟着一个点号,再跟着一些整数。整数值由一到多个数组成,前面可以有+、-号表示正负。百分数值是在数字后面跟一个百分号%。(1)+和-两侧的值必须使用相同的单位类型。(3)/计算的两个值中右边那个必须是数字。(2)*计算的两个值必须有一个是数字。(4)任何情况下都不能除0。原创 2023-01-05 23:06:35 · 628 阅读 · 0 评论 -
CSS权威指南(三)特指度
我们都知道,当同一元素被设置了两个相同属性的时候,只会生效其中的一个属性值。至于到底生效哪一个属性值,自然是有一套计算规则的。在CSS中,选择符的特指度由选择符本身的组成部分决定。通常一个特指度由四个部分组成,例如0,0,0,0。选择符特指度的值通过下述规则确定。行内样式的特指度为1,0,0,0选择符中的每个ID属性值加0,1,0,0选择符中的每个类属性值、属性选择或伪类0,0,1,0选择符中的每个元素和伪元素加0,0,0,1。连结符合通用选择器不增加特指度。原创 2023-01-04 19:22:37 · 544 阅读 · 0 评论 -
CSS权威指南(二)选择符
CSS的一个核心优势就是可以为文档中某种种类的元素全部应用相同的样式规则。CSS样式便于修改和编辑,而且能应用到指定的所有文本元素上。(1)元素选择符即直接使用元素的名称进行选择,类似于。元素选择符是最基本的选择符。原创 2023-01-03 18:16:12 · 435 阅读 · 0 评论 -
CSS权威指南(一)CSS概述
ps.通常情况下,块级元素可以包含行内元素,但行内元素包含块级元素就不太符合规则了。除此之外可以通过display属性设置block和inline,这是可以的。 上述代码段的意思是,如果能够识别并处理color:black这个属性值组合,就应用该样式,否则跳过该样式。ps.在rel属性中添加alternate,可以将样式表设置为候选样式表,即可切换样式表。 样式表中不允许有标记,但允许有HTML的注释标记。(1)置换元素和非置换元素。(2)@import指令。(2)元素的显示方式。原创 2022-12-31 21:40:48 · 1295 阅读 · 0 评论