博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于CSS的个人理解
阅读量:6759 次
发布时间:2019-06-26

本文共 2025 字,大约阅读时间需要 6 分钟。

CSS的个人理解

一、概念

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

二、工作方式

1.工作原理

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

2.如何应用

(1)内联样式

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

      
My CSS experiment

Hello World!

This is my first CSS example

(2)内部样式表

      
My CSS experiment

Hello World!

This is my first CSS example

(3)外部样式表

单独建立一个.css文档

易于代码更新,减少代码冗余。作为新手,这一点也是必须要做到的。

      
My CSS experiment

Hello World!

This is my first CSS example

三、语法内容

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:toprightbottomleft

3)绝对定位

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

absolute:toprightbottomleft

4)固定定位

fixed

(4)伸缩盒布局

display:flex;

转载地址:http://swzeo.baihongyu.com/

你可能感兴趣的文章
Hadoop 安装记录
查看>>
hdu 5206 Four Inages Strategy 判断是否是正方形
查看>>
Linq中使用Left Join
查看>>
HDFS Safemode问题
查看>>
GDI编程小结
查看>>
(C#基础) byte[] 之初始化, 赋值,转换。(转)
查看>>
mysql设置指定ip远程访问连接实例
查看>>
从js的repeat方法谈js字符串与数组的扩展方法
查看>>
IIS中添加MIME类型
查看>>
Restful风格wcf调用2——增删改查
查看>>
Kettle定时执行(ETL工具)【转】
查看>>
SQL Server里的闩锁介绍
查看>>
ARM Linux 3.x的设备树(Device Tree)
查看>>
信用局项目总结阶段
查看>>
webbrowser自动实现登录博客园
查看>>
Javascript学习6 - 类、对象、继承
查看>>
Java并发编程:如何创建线程?
查看>>
Faster R-CNN CPU环境搭建
查看>>
IOS在线安装App
查看>>
base 镜像 - 每天5分钟玩转容器技术(10)
查看>>