网赚妈妈

 找回密码
 立即注册
搜索
查看: 427|回复: 0

[网赚之家] CSS盒模型以及CSS选择器

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-10-2 23:54:24 | 显示全部楼层 |阅读模式

    jZiSz38B5g3Sz53d.jpg

    Part 1 :盒模型(box model)

    "every element in web design is a rectangular box."

    在一个文档中,每个元素都被表示为一个矩形的盒子。在CSS中,使用标准盒模型(也可叫做框模型)描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。

    每个盒子有四个边:外边距边(margin), 边框边(border), 内填充边(padding) 与 内容边(content)。

    推荐下我的前端群:524262608,不管你是小白还是大牛,小编我都挺欢迎,不定期分享干货,包括我自己整理的一份2017最新的前端资料和零基础入门教程,欢迎初学和进阶中的小伙伴。

    pqH0xqqaymlql0my.jpg

    1-设置外边距边(margin)

    外边距区域margin area用空白区域扩展边框区域,以分开相邻的元素。它的大小为 margin-box 的高宽。外边距区域大小由 margin-top, margin-right, margin-bottom, margin-left及简写属性 margin控制。

    pcqDfiu2252gMqq2.jpg

    上面属性均允许使用负值

    注意:这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的:

    即:margin: top right bottom left

    margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。

    margin 可以设置为 auto。也可为外边距设置长度值或百分比(百分数是相对于父元素的 width 计算的).

    单边外边距属性

    可以使用单边外边距属性为元素单边上的外边距设置值。

    假设需要把 p 元素的左外边距设置为 20px。可以采用以下方法:p {margin-left: 20px;}

    值复制

    若有值相同的边距值,则不用将四个属性值全部写出

    CSS 定义了一些规则,允许为外边距指定少于 4 个值。规则如下:

    如果缺少左外边距的值,则使用右外边距的值。

    如果缺少下外边距的值,则使用上外边距的值。

    如果缺少右外边距的值,则使用上外边距的值。

    qZo0Bae9dJbDzgJM.jpg

    子 要设置上 下 右 左边距值为0.25em 1em 0.5em 0.5em.也就是说右边和下边的值相同。

    h1 {margin: 0.25em 1em 0.5em;}

    2-设置边框边(border)

    边框 (border) 是围绕元素内容和内边距的一条或多条线,CSS border 属性允许你规定元素边框的样式(border-style)、宽度(border-style)和颜色(border-color)。

    G6VOWBLH5bL6h6Hz.jpg

    3-设置内填充边(padding)

    CSS padding 属性定义元素边框与元素内容之间的空白区域,padding 属性接受长度值或百分比值,但不允许使用负值。

    可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位(em/ ex / px)或百分比

    KBaRZBQZELACeb7b.jpg

    -设置内容边(content)

    内容区域content area 是包含元素真实内容的区域。它通常包含背景、颜色或者图片等,位于内容边界的内部,它的大小为内容宽度 或 content-box宽及内容高度或content-box高。

    content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

    关于伪元素:"CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree."

    即伪元素用于创建一些不在文档树中的元素,并为其添加样式。更多详情以后会专门整理~

    A-content与:before 伪元素配合使用:

    该伪元素允许创作人员在元素内容的最前面插入生成内容

    B-content与:after伪元素配合使用,在元素之后添加内容

    例如:如何使用 :before 在元素内容之前插入图像

    <!DOCTYPE html ><html><head><style type="text/css">h1:before {content:url(/logo_white.gif)}</style></head><body><h1>This is a heading</h1><p>The :before pseudo-element inserts content before an element.</p><h1>This is a heading</h1></body></html>

    CSS3中新增的盒模型计算方式:box-sizing

    box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

    语法:box-sizing: content-box|border-box|inherit;

    OpXJeEocUDXGxo27.jpg

    CSS3中新增的边框属性

    border-radius:创建圆角边框

    box-shadow:向矩形添加阴影

    border-image:使用图片来绘制边框

    Part2:选择器(Selectors)

    CSS选择器用于选择你想要的元素的样式的模式。

    选择器的类别:

    类选择器,id选择器,属性选择器 ,派生选择器 ,后代(包含)选择器,子元素选择器,相邻兄弟选择器

    1-类选择器:允许以一种独立于文档元素的方式来指定样式。

    该选择器可以单独使用,也可以与其他元素结合使用.

    语法: * 选择器名称{样式}

    用法:

    独立使用

    多类选择器:通过把多个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。

    结合元素选择器来使用。

    eg.若希望只有段落显示为红色文本:

    p.important {color:red;}

    eg.假设 class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作:

    .important.warning {background:silver;}

    2-id选择器:可以为标有特定 id 的 HTML 元素指定特定的样式。

    语法:# 选择器名称 {样式}

    用法:

    独立使用

    与派生选择器一起使用:

    eg.

    #sidebar p {

    font-style: italic;

    text-align: right;

    margin-top: 0.5em;

    }

    3-属性选择器 :可以为拥有指定属性的 HTML 元素设置样式

    语法 :元素名称[指定属性]{样式}

    用法:

    单个属性值

    eg:把包含标题(title)的所有元素变为红色

    *[title] {color:red;}

    根据具体属性值选择

    eg.将指向 Web 服务器上某个指定文档的超链接变成红色

    a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

    子串匹配属性选择器

    a4lkT6qjK6u6G6q1.jpg

    eg.

    特定属性选择类型

    eg.选择 lang 属性等于 en 或以 en- 开头的所有元素

    *[lang|="en"] {color: red;}

    根据部分属性值选择

    eg.选择 class 属性中包含 important 的元素

    p[class~="important"] {color: red;}

    4-派生选择器:依据元素在其位置的上下文关系来定义样式

    语法:元素名{样式}

    5-后代(包含)选择器:可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。

    语法:在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”,但是要求必须从右向左读选择器。

    eg.希望只对 h1 元素中的 em 元素应用样式

    h1 em {color:red;}

    上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中.

    6-子元素选择器:缩小范围,只选择某个元素的子元素

    eg.选择只作为 h1 元素子元素的 strong 元素

    h1 > strong {color:red;}

    语法解释:子选择器使用了大于号(子结合符)。

    子结合符两边可以有空白符,这是可选的。

    7-相邻兄弟选择器:可选择紧接在另一元素后的元素,且二者有相同父元素

    语法:相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。与子结合符一样,相邻兄弟结合符旁边可以有空白符。

    eg.要增加紧接在 h1 元素后出现的段落的上边距

    h1 + p {margin-top:50px;}

    推荐下我的前端群:524262608,不管你是小白还是大牛,小编我都挺欢迎,不定期分享干货,包括我自己整理的一份2017最新的前端资料和零基础入门教程,欢迎初学和进阶中的小伙伴。

    选择器分组

    可以将任意多个选择器分组在一起,对此没有任何限制。

    例如,如果想把很多元素显示为灰色,可以使用类似如下的规则:

    body, h2, p, table, th, td, pre, strong, em {color:gray;}

    提示:通过分组,创作者可以将某些类型的样式“压缩”在一起,这样就可以得到更简洁的样式表。

    选择器的优先级

    浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

    优先级是如何计算的?

    优先级就是分配给指定的CSS声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

    而当优先级与多个CSS声明中任意一个声明的优先级相等的时候,CSS中最后的那个声明将会被应用到元素上。

    当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖(take over)该元素从祖先元素继承而来的规则。

    1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然,IE 6不支持这个属性,于是它也成为一种hack被很多人所熟知,真正使命被人淡忘。

    2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理,所以不推荐使用。

    3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。

    4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}

    5、第五级由一个或多个 类型选择器定义。如 div{margin:6px;} 覆盖 *{margin:10px;} 。

    原文:http://www.jianshu.com/p/e449ef00a3

    回复

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-18 05:23 , Processed in 0.166907 second(s), 15 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表