CSS的个人理解

一、概念

层叠样式表，主要由属性和属性值（value）组成。（虽然HTML、CSS对代码大小写不敏感，但是属性和属性值对代码大小写是敏感的）

二、工作方式

1.工作原理

由浏览器将CSS和html分别转化为文档对象，组合为DOM文档对象模型，标记语言中的每个元素、属性、文字片段都是DOM树中的一个节点，再由浏览器转换显示。

2.如何应用

（1）内联样式

优先级最高，但由于会造成代码冗余及代码更新任务庞大，一般不采用。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>My CSS experiment</title>

  </head>

  <body>

    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>

    <p style="color:red;">This is my first CSS example</p>

  </body>

</html>

（2）内部样式表

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>My CSS experiment</title>

    <style>

      h1 {

        color: blue;

        background-color: yellow;

        border: 1px solid black;

      }

      p {

        color: red;

      }

    </style>

  </head>

  <body>

    <h1>Hello World!</h1>

    <p>This is my first CSS example</p>

  </body>

</html>

（3）外部样式表

单独建立一个.css文档
易于代码更新，减少代码冗余。作为新手，这一点也是必须要做到的。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>My CSS experiment</title>

    <link rel="stylesheet" href="style.css">

  </head>

  <body>

    <h1>Hello World!</h1>

    <p>This is my first CSS example</p>

  </body>

</html>

三、语法内容

1.css声明

格式：“property : value”
属性（property）与属性值（value）单词拼写采用美式标准。

2.css声明块

格式：“{property : value; property : value;}”
“;”的丢失最易导致错误。

3.css选择器和规则

格式：“selector {property : value; property : value;}”

（1）层叠（cascade）

1）简单选择器

元素选择器 p
类选择器 .class
ID选择器 #id
通用选择器 *
并且选择器 p.class#id
并列选择器 p,.class,#id

2）层次选择器

后代选择器 parent son，使用空格分割两个选择器
子代选择器 parent>son，使用>分割两个选择器
下一个兄弟选择器 selector+selector，使用+分割两个选择器
之后所有兄弟选择器 selector~selector，使用~分割两个选择器

3）属性选择器（form表单多用）

selector[property]
selector[property=value]
selector[property*=value]
selector[property^=value]
selector[property$=value]
selector[property~=value]

4）伪类选择器

子元素
:first-child
:nth-child()
:first-of-type
状态
:hover
:active
(顺序LVHA:link visited hover active)
:focus

5）伪元素选择器

::after 常用于清除浮动
::before
::first-letter
::first-line

6）特性值：

！important（改变了CSS方式，尽量绕开！）
放在一段style中（1000）
id（100）
.class或伪类或属性选择器（10）
元素选择器或伪元素选择器（1）
后者覆盖前者（按照顺序）

（2）继承

这里不多叙述…………

4.布局

（1）正常布局流

1）div行及元素
2）span块级元素

（2）浮动布局

float:left;
float:right;
clear:both;（清除左右浮动，该元素会换行）

*块级元素一旦浮动之后:
1）脱离了当前文档流，对父级元素失去了支撑的作用，后面的非浮动元素会插入到浮动元素的下面。
2）浮动元素的宽高默认由其内容所决定，但是我们可以为其指定宽高。
3）当浮动元素无法承载子元素的时候，子元素会在下一行显示。
4）浮动元素的margin无法合并。

*浮动引发的问题:
1）子元素浮动会失去对父元素的支撑
解决方案：在所有子元素的末尾添加一个空元素，该空元素须clear:both;
2）如果为子元素的宽度指定绝对值，并且子元素具有边框，在缩放浏览器的时候会错位
解决方案：

1.box-sizing:border-box;

2..right {margin-left:100px;}

（3）定位布局

1）静态定位
2）相对定位

相对于该元素原先位置进行移动

relative:

top

right

bottom

left

3）绝对定位

相对于该元素最近的定位父元素位置进行移动

absolute:

top

right

bottom

left

4）固定定位

fixed

（4）伸缩盒布局

display:flex;

关于CSS的个人理解的更多相关文章

  1. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  2. css基础--深入理解opacity和rgba的区别

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...

  3. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

  4. CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

    其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...

  5. css基础--深入理解弹性盒flex布局

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为, ...

  6. CSS中正确理解浮动以及clear:both的关系

    要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个 ...

  7. 【CSS】Sass理解

    原文在 https://github.com/zhongxia245/blog , 欢迎 star! Sass理解 时间:2016-09-24 22:56:12 作者:zhongxia 这里就不讲解S ...

  8. 【CSS选择器】理解汇总和记录

    1.选择器中符号含义汇总(这部分包含了对选择器的通用理解): 1.1.多元素组合符号:(共6个,一个是CSS3的)(适用所有元素:ID组合,类组合,属性组合,标签组合,伪类组合,以及以上所有混合组合) ...

  9. CSS定位 深入理解定位(position)的偏移

    前言 CSS有三种基本的布局机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.但元素究竟如何定位,定位到 ...

随机推荐

  1. 在win10操作系统中pycharm启动时无法打开的解决方法

    ''' 当打开pycharm时报错 Error launching Pycharm Failed to load JVM DLL C:\Program Files\Jetbrains\Pycharm ...

  2. 01-RocketMQ介绍

    一.MQ介绍 1.什么是MQ?为什么要用MQ? MQ:MessageQueue,消息队列. 队列,是一种FIFO 先进先出的数据结构.消息由生产者发送到MQ进行排队,然后按原来的顺序交由消息的消费者进 ...

  3. JZ-051-构建乘积数组

    构建乘积数组 题目描述 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]A[1]...A[i-1]A[i+1]...A[n-1]. ...

  4. 实例化类对象及类的属性set方法使用不当

    类的属性中set方法操作数据库,新建类对象并给其赋值时总会触发该set方法,而导致不期望的错乱: 库位类Storage,其中传感器状态SensorStatus和逻辑状态LogicStatus有一定的关 ...

  5. ABP Framework 5.2 RC 发布及新增功能介绍

    ABP Framework 5.2 RC 新增功能 目录 ABP Framework 5.2 RC 新增功能 单层解决方案模板 EF Core 数据库迁移 UI 和 数据库 选项 API 版本控制 源 ...

  6. 服务端&客户端注册进Eureka

    目录 服务端(接口提供方) 创建项目 导入Eureka客户端POM 启动类添加注解 配置YML 暴漏接口 启动服务 集群 配置成功后页面如下 客户端(接口调用方) 修改Yml文件 配置类 启动类添加注 ...

  7. java下载镜像

    镜像地址 https://repo.huaweicloud.com/java/jdk/ 如果你不知道选择哪个版本就点击下面这个链接吧 https://repo.huaweicloud.com/java ...

  8. 2.5 C++STL stack详解

    文章目录 2.5.1引入 2.5.2 代码示例 2.5.3 代码运行结果 总结 2.5.1引入 stack是一种"先进后出"的容器. 不过值得注意的是stack是一种关联容器,是通 ...

  9. Django 之 modelForm （edit.html页面的编写）

    models.py文件 from django.db import models # Create your models here. from django.db import models # C ...

  10. RDMA相关的技术网站

    https://www.cnblogs.com/vlhn/p/7909893.html https://www.cnblogs.com/vlhn/ 这个家伙的博客写的还不错,可以参考.