一.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. 《剑指offer》栈的插入弹出序列

    本题来自<剑指offer> 栈的插入弹出序列 题目: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2, ...

  2. bzoj 4007

    非常好的树形dp 首先,有个很显然的状态:记状态f[i][j]表示以i为根节点的子树中选了j个叶节点作战,那么很显然有转移:f[i][j1+j2]=f[i<<1][j1]+f[i<& ...

  3. 20165314 2016-2017- 3《Java程序设计》第2周学习总结

    20165314 2016-2017- 3<Java程序设计>第2周学习总结 教材学习内容总结 byte<short<char<int<long<float& ...

  4. JavaScript实现的抛物线运动效果

    css88 技术文档地址: http://www.css88.com/archives/5355 张鑫旭 技术文档地址: https://www.zhangxinxu.com 使用示例: 使用时直接引 ...

  5. Appium Desired Capabilities

    Appium Desired Capabilities Desired Capabilities 是由 keys 和 values 组成的 JSON 对象. 举个简单例子: { "platf ...

  6. 远程执行shell脚本

    ssh -p2016 apache@10.10.18.130 '/bin/sh /data/www/vhosts/WOStest3_ENV/update_env.sh' 需要设置shell远程免密码登 ...

  7. jdk的卸载及安装+环境变量的配置

    一.卸载:在控制面板中删除.这是最基本的方式.2. 采用360安全卫士的软件卸载工具,记得将有关的注册表信息全部删除.3. 在“运行”中输入Regedit,打开注册表编辑器,找到HKEY_LOCAL_ ...

  8. JAVA 代码中使用中文的办法

    在编译代码中插入 -encoding UTF-8 示例: javac -encoding UTF-8 *.java

  9. [转] AES,SHA1,DES,RSA,MD5区别

    AES:更快,兼容设备,安全级别高: SHA1:公钥后处理回传 DES:本地数据,安全级别低 RSA:非对称加密,有公钥和私钥 MD5:防篡改 相关: 公开密钥加密(英语:public-key cry ...

  10. 清北合肥day1

    题目: 1.给出一个由0,1组成的环 求最少多少次交换(任意两个位置)使得0,1靠在一起 n<=1000 2.两个数列,支持在第一个数列上区间+1,-1 每次花费为1 求a变成b的最小代价 n& ...