一.CSS基础选择器

# 1.*（通配选择器）：html,body以及body下用于显示的标签

#html和body颜色会被改变，但是div标签不会发生改变，由于不同的选择器具有优先级

# 语法：* {样式块}

# 2.标签名（标签选择器）：该标签对应的所有该标签

# 在实际开发中，尽量少用或不用标签名来作为选择器，标签名如果作为选择器的话一般在该标签为最内层（语义|功能）标签

# 语法：标签名 {样式块}

# 3. .类名（class选择器）：对应该类名的所有标签

# 语法：. {样式块}

# 4. #id名（id选择器）：对应该id名的所有标签

# 语法：#id名 {样式块}

# 在一个html文件中,通常id唯一

选择器的优先级

# 控制范围越精确，优先级越高，所设置的样式就会覆盖优先级低的相同属性样式，不同的属性会叠加。

# 优先级顺序： 统配 < 标签 < class < id < 行间式 < !important

# 内联式和外联式，相同属性采用下者覆盖上者，不同属性叠加。

# 注：!important 书写在属性值后;前

二.长度与颜色样式

# 1.长度

单位：px mm cm em rem vw vh in

# 2.颜色

#三种设置方式：

# 1.颜色单词

# 2.#000000 ~ FFFFFF （#abc == #AABBCC）

# 3.rgb(0~255,0~255,0~255) | rgba(0~255,0~255,0~255,0~1)

三.显示方式display

# 三种方式：

# 1.display:inline;

# 同行显示，只支持部分css样式（不支持宽高），宽高有文本内容撑开

# 2.display:block;

#异行显示，支持所有css样式，设置了宽高就采用设置的值，宽高也有默认的特性

# 3.display:inline-block;

#同行显示，支持所有的css样式，设置了宽高就采用设置的值

#标签的显示方式就是用display属性控制

标签分类

# 1.单标签（主功能）

# br|hr|img|meta|link，功能具体，不需要内容，设置为单标签，单标签结束符在标签尾部，可以省略

# 2.双标签（主内容）

# h1|p|span|div，具有子标签，包含内容，设置为双标签，双标签首尾分离

嵌套关系

# 因为页面架构就是由标签一层层嵌套关系形成

#嵌套关系的规则：

#1.inline-block类型不建议嵌套任意标签，可以嵌套标签，但是inline-block布局会受内部的文本影响（文本底端对齐），所以如果嵌套其他类型标签时，一定要结合vertical-align属性操作，左右还有一个空格间距。因此系统的inline-block都设计成单标签

# vertical-align属性

# baseline:文本底端对齐（默认）

# top:标签顶端对齐

# middle:标签中线对齐

# bottom:标签底部对齐

#2.inline类型只嵌套inline类型的标签，inline嵌套block和inline-block,不起任何作用，只能嵌套inline

# 3.block类型可以嵌套任意类型标签

# 注：hn和p只建议嵌套inline类型标签

#问题：block如何同行显示？？

四.盒模型

# 盒模型组成部分：

#1.margin:外边距，控制盒子的位置（布局），通过左（margin-left）和上（margin-top）控制自身位置，通过右（margin-right）和下（margin-bottom）影响兄弟盒子位置（划区域）

#2.border:边框，样式/宽度/颜色 （solid实线 dashed虚线 dotted点状线）

#3.padding:内边距，从显示角度控制文本的显示区域

#4.content:内容区域，由宽*高组成

#注：

#1.margin和padding:起始为上，顺时针依次赋值，不足边取对边

#2.要做到文本内移，设置padding，如果又想显示区域不变，相应减少content

盒模型布局

#1.上下两个盒子的margin-bottom和margin-top功能相同，同时出现，取大值

#2.第一个有显示区域的子级会和父级联动（margin-top重叠），取大值，我们可以通过设置父级的border-top属性或padding-top属性，将其分开，就不会联动了

#3.block设置宽高，一定采用设置的宽高

#4.block默认宽高：
# 1.没有设置宽，宽自适应父级的宽（子级的border+padding+width=父级的width）
# 2.没有设置高，高由内容撑开
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>盒模型布局</title>

    <style>

        div {

            width: 78px;

            height: 33px;

            background-color: orange;

            border: 1px solid black;

        }

        /*前提: 盒子显示区域 80 x 35*/

        .d1 {}

        .d2 {

            margin-left: 80px;

            margin-top: -35px;

            /*margin-bottom: 35px;*/

        }

        .d3 {

            margin-left: calc(80px * 2);

            margin-top: -35px;

        }

        .d4 {

            margin-left: calc(80px * 3);

            margin-top: -35px;

        }

        .d5 {

            margin-left: calc(80px * 4);

            margin-top: -35px;

        }

        .d6 {

            margin-left: calc(80px * 5);

            margin-top: -35px;

        }

        .d7 {

            margin-left: calc(80px * 6);

            margin-top: -35px;

        }

    </style>

</head>

<body>

    <!--.d${$}*7-->

    <div class="d1">1</div>

    <div class="d2">2</div>

    <div class="d3">3</div>

    <div class="d4">4</div>

    <div class="d5">5</div>

    <div class="d6">6</div>

    <div class="d7">7</div>

    <hr>

    <!--需求: b1 与 b2 上下间接50px-->

    <style>

        .b1 {

            margin-bottom: 50px;

        }

        .b2 {

            margin-top: 50px;

        }

        /*总结: 上下两个盒子的margin-bottom和margin-top功能相同, 同时出现, 取大值*/

    </style>

    <div class="b1"></div>

    <div class="b2"></div>

    <!--了解: 左右正常叠加-->

    <style>

        .s1 {

            margin-right: 10px;

        }

        .s2 {

            margin-left: 10px;

        }

    </style>

    <span class="s1">1</span><span class="s2">2</span>

    <hr>

    <style>

        .sup {

            width: 200px;

            height: 200px;

            background-color: orange;

            /*margin-top: 40px;*/

            /*border-top: 1px solid black;*/

            padding-top: 10px;

        }

        .sub1 {

            /*border: 1px solid red;*/

            width: 50px;

            height: 50px;

            background-color: red;

            margin-top: 50px;

        }

        .sub2 {

            width: 50px;

            height: 50px;

            background-color: pink;

            margin-top: 50px;

        }

        /*总结: 第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值*/

        /*解决方案: 1.父级设置border-top | 2.父级设置padding-top*/

    </style>

    <section class="sup">

        <section class="sub1"></section>

        <section class="sub2"></section>

    </section>

</body>

</html>

盒子总结

'''

block:

默认宽高

1.没有设置宽, 宽自适应父级的宽(子级的border+padding+width = 父级的width)

2.没有设置高, 高由内容撑开

设置了宽高

一定采用设置的宽高

显示宽高

border+padding+content

自身布局

margin-top | margin-left

兄弟布局

margin-bottom | margin-right

父级水平居中

margin: 0 auto;

与inline相关的盒子

vertical-align

'''

CSS选择器、样式、盒模型的更多相关文章

  1. css 选择器；盒模型

    一.引入方式:(1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - 外接样式 二.css选择器 基础选择器 * 通配 ...

  2. 第五十六 css选择器和盒模型

    1.组合选择器 群组选择器 #每个选择为可以位三种基础选择器任意一个,用逗号隔开,控制多个. div,#div,.div{ color:red } 后代(子代)选择器 .sup .sub{ 后代 } ...

  3. 浅谈css中的盒模型（框模型）

    css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...

  4. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  5. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  6. CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  7. 选择器(&伪)/盒模型

    一.选择器高级 1.组合选择器: /*群主选择器 : 同时可以控制多个选择器*/ /*#dd,div,#a{}*/ /* d{ 起相同类名 color: red; }*/ 举例: .d1,.d2,.d ...

  8. （4）《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型；div与span；<a>元素的链接色；伪类

    1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...

  9. css — 选择器、盒子模型

    目录 1. css引入方式 2. css选择器 3. css的盒模型 css: 层叠样式表 1. css引入方式 行内样式 <div style='color:red;'>mjj</ ...

  10. web开发： css高级与盒模型

    一.组合选择器 二.复制选择器优先级 三.伪类选择器 四.盒模型 五.盒模型显示区域 六.盒模型布局 一.组合选择器 <!DOCTYPE html> <html> <he ...

随机推荐

  1. Nginx的进程模型及高可用方案(OpenResty)

    1. Nginx 进程模型简介 Nginx默认采用多进程工作方式,Nginx启动后,会运行一个master进程和多个worker进程.其中master充当整个进程组与用户的交互接口,同时对进程进行监护 ...

  2. LeetCode（102）：二叉树的层次遍历

    Medium! 题目描述: 给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如:给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 ...

  3. jQuery为div添加select和option

    简单描述:用jQuery给页面添加select下拉框,直接上图 总结:清楚明了^_^

  4. MongoDB----提升

    文档之间的联系 一对一:通过文档内嵌的形式体现一对一的关系 db.user.insert({name:"xiaoming",frind:{name:"xiahua&quo ...

  5. vue项目中 axios 和Vue-axios的关系

    文章收集于:https://segmentfault.com/q/1010000010812113 在vue项目中,会经常看到如下代码:   今天看到有些项目是这样写的,就有点看不懂了.  ----解 ...

  6. Pycharm同步本地代码至GitHub

    注册github账号 github地址,进入注册账号 安装git Windows下载地址1 Windows下载地址2 在官方下载完后,双击exe文件进行安装,安装到Windows Explorer i ...

  7. （转）一位资深程序员大牛给予Java初学者的学习路线建议

    Java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是你是如何学习Java的,能不能给点建议?今天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈每 ...

  8. 阿里云人脸识别测试接口出错 返回Body：{ "errno": 1031, "err_msg": "Invalid Image URL.", "request_id": "cdbe2927-e1bb-4eb1-a603-8fcd4b0b7fc8" }

    错误信息如下 返回Body:{ "errno": 1031, "err_msg": "Invalid Image URL.", " ...

  9. 使用python调用shell判断当前进程是否存在

    使用subprocess模块判断当前进程是否存在 #! /usr/bin/env python import subprocess res = subprocess.Popen(r'ps -ef |g ...

  10. C#学习-属性是对字段的扩展

    属性是对字段的扩展. 根据面向对象语言的封装思想,字段最好设为private,因为这样可以防止客户端直接对字段进行篡改,从而保证了内部成员的完整性. 于是为了访问类中的私有字段,C#提供了属性这种机制 ...