关于CSS的个人理解
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
left3）绝对定位
相对于该元素最近的定位父元素位置进行移动
absolute:
top
right
bottom
left4）固定定位
fixed（4）伸缩盒布局
display:flex;
关于CSS的个人理解的更多相关文章
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- css基础--深入理解opacity和rgba的区别
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...
- css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
- CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位
其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...
- css基础--深入理解弹性盒flex布局
欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为, ...
- CSS中正确理解浮动以及clear:both的关系
要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个 ...
- 【CSS】Sass理解
原文在 https://github.com/zhongxia245/blog , 欢迎 star! Sass理解 时间:2016-09-24 22:56:12 作者:zhongxia 这里就不讲解S ...
- 【CSS选择器】理解汇总和记录
1.选择器中符号含义汇总(这部分包含了对选择器的通用理解): 1.1.多元素组合符号:(共6个,一个是CSS3的)(适用所有元素:ID组合,类组合,属性组合,标签组合,伪类组合,以及以上所有混合组合) ...
- CSS定位 深入理解定位(position)的偏移
前言 CSS有三种基本的布局机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.但元素究竟如何定位,定位到 ...
随机推荐
- ComboBox控件绑定数据源后,添加'请选择'或'全部'
ComboBox控件绑定数据源后,添加'请选择'或'全部' 当使用ComboBox控件绑定数据源之后,通过Items 属性添加的数据是无效的,此时如果要在所有选项前添加 选项 ,则需要考虑从数据源下手 ...
- JZ-011-二进制中 1 的个数
二进制中 1 的个数 题目描述 输入一个整数,输出该数32位二进制表示中1的个数.其中负数用补码表示. 题目链接: 二进制中 1 的个数 代码 /** * 标题:二进制中 1 的个数 * 题目描述 * ...
- svelte组件：Svelte3自定义Navbar+Tabbr组件|svelte自定义插件
基于Svelte3自定义组件Navbar+Tabbar沉浸式导航条|底部凸起菜单栏 Svelte 一种全新的构建用户界面的框架.当下热门的 Vue 和 React 在浏览器中需要做大量的工作,而 Sv ...
- Mysql基础语法-建库-建表(增、删、改、查、表关联及子查询)
前言:MySQL是一个数据库管理系统,也是一个关系数据库.它是由Oracle支持的开源软件,MySQL可以在各种平台上运行UNIX,Linux,Windows等.可以将其安装在服务器甚至桌面系统上. ...
- Linux-系统启动与MBR扇区修复
目录 1.系统启动过程 1.1 MBR扇区 1.2 MBR扇区的备份与还原 1.3 修复MBR 1.3.1 dd备份MBR信息 1.3.2 光驱启动修复 1.4 grub引导代码修复 1.系统启动过程 ...
- TP5框架中实现多条件登录（自写代码，密码未md5()加密）
HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- CodeReview规范
目标和原则 提高代码质量,及早发现潜在缺陷,降低修改/弥补缺陷的成本 促进团队内部知识共享,提高团队整体水平 评审过程对于评审人员来说,也是一种思路重构的过程,帮助更多的人理解系统 是一个传递知识的手 ...
- typora 使用Markdown语法编辑文本
MarkDown语法 标题 一级标题# 二级标题## ============= 三级标题### 四级标题 依此类推 Markdown 段落格式 Markdown 段落没有特殊的格式,直接编写文字,段 ...
- System x 服务器制作ServerGuide U盘安装Windows Server 2012 R2操作系统
以下内容来源于:联想官方知识库 http://iknow.lenovo.com.cn/detail/dc_154773.html 本例介绍以U盘方式,通过ServerGuide引导在System x ...
- LGP7840题解
给出一种新的理解方式,本质上和正解是一致的. 首先我们现在已经有了一个森林,我们现在要给他加一条边,加哪一条边是最优的呢? 假设加的边是 \((u,v)\),那么 \(((d[u]+1)^2-d[u] ...