一.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. java-HTML&javaSkcript&CSS&jQuery&ajax

    CSS  伪装 1.<style>a;link{color:#000000} a:visited{color:#000000; a.:hover{color:#FF00FF} a:acti ...

  2. uva11827 处理下输入

    /*0.012s*/ #include<cstdio> #include<algorithm> using namespace std; ], n; int gcd(int a ...

  3. linux安装MongoDB

    安装 32bit的mongodb最大只能存放2G的数据,64bit就没有限制 到官网,选择合适的版本下载,本次下载3.4.0版本 解压 tar -zxvf mongodb-linux-x86_64-u ...

  4. centos--git搭建之Gogs安装

    1.下载git yum intall -y git 2. 创建git用户(必须新创建git用户, 用root用户会导致无法下载) #创建git用户 sudo adduser git #给git用户设置 ...

  5. 总结Java虚拟机内存区域模型

    本篇文章主要来总结一下Java虚拟机内存的各个区域,以及这些区域的作用.服务对象以及其中可能产生的问题,作为大家的面试宝典. 首先我们来看一下Java运行时的数据区域,Java虚拟机在执行Java程序 ...

  6. 饮冰三年-人工智能-linux-03 Linux文件管理（权限管理+归档+压缩）

    1:对文件的权限管理 drwxr-xr-x. 最后一个.表示在安全情况下创建的.selinux a: d表示目录:-表示普通文件:l表示快捷方式:b设备文件 b:- 属主的权限 r:读权限:w:写权限 ...

  7. BZOJ 2818 Gcd(欧拉函数+质数筛选）

    2818: Gcd Time Limit: 10 Sec  Memory Limit: 256 MB Submit: 9108  Solved: 4066 [Submit][Status][Discu ...

  8. SQLSERVER 数据量太大，重启服务器后，数据库显示正在恢复

    问题:如题. 解决方法:右键数据库   属性——选项——恢复模式:简单

  9. 用Photoshop扭曲滤镜工具打造旋转的光束效果

    原文:https://www.w3cschool.cn/photoshopgjjc/dthfn1.html 教程与已往的不同,作者加上了一些新的步骤如锐化等,出来的效果也有所改进.大致过程:先用滤镜制 ...

  10. zprofiler三板斧解决cpu占用率过高问题（转载）

    zprofiler三板斧解决cpu占用率过高问题 九居 JVM性能与调试平台   zprofiler   上周五碰到了一个线上机器cpu占用率过高的问题.问题本身比较简单,但是定位过程中动用了多个zp ...