一.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. es6简单介绍

    1.ECMAScript 6 简介 2.let和const命令 3.变量的解构赋值 4.字符串的扩展之模板字符串 5.正则的扩展 6.数值的扩展 7.函数的扩展 8.数组的扩展 9.对象的扩展 10. ...

  2. Python实操二

    实操一: 1.用map来处理字符串列表啊,把列表中所有人都变成sb,比方alex_sb name=['alex','wupeiqi','yuanhao'] name=['alex','wupeiqi' ...

  3. 简单的做一个图片上传预览（web前端）

    转载:点击查看原文 在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处理. 效果预览: & ...

  4. echarts + timeline 显示多个options

    var option = { //timeline基本配置都写在baseoption 中 baseOption: { timeline: { //loop: false, axisType: 'cat ...

  5. react react-transition-group实现动画

    import React,{ Component,Fragment } from 'react';import './style.css';import { CSSTransition,Transit ...

  6. Html中，id、name、class、type的区别

    <input type="text" name="name" id="name" class="txt"> ...

  7. 新的表格展示利器 Bootstrap Table Ⅰ

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

  8. 2018项目UML设计-课堂实战

    1. 团队信息 队名:小白吃队 成员: 卢泽明 031602328 蔡文斌 031602301 葛亮 031602617 刘浩 031602423 张扬 031602345 李泓 031602321 ...

  9. 3步实现ssh面密码登录

    1.上次本机的公钥和私钥 [root@vicweb ~]#ssh-keygen -t rsa Generating public/private rsa key pair. Enter file in ...

  10. idea创建项目报错（Maven execution terminated abnormally (exit code 1) ）解决方案

    版本: idea14.0.2 java1.8 maven3.5 -------------------------------------------------------------------- ...