资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/关于CSS的个人理解

关于CSS的个人理解

Rango / 971人阅读

摘要：的个人理解一概念层叠样式表，主要由属性和属性值组成。如何应用内联样式优先级最高，但由于会造成代码冗余及代码更新任务庞大，一般不采用。声明块格式的丢失最易导致错误。当浮动元素无法承载子元素的时候，子元素会在下一行显示。浮动元素的无法合并。

CSS的个人理解 一、概念

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

二、工作方式 1.工作原理

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

2.如何应用 （1）内联样式

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

</>复制代码 
  2.   
  3.     
  4.     <span class="hljs-attr">My</span> <span class="hljs-string">CSS experiment</span>
  5.   
  6.   
  7.     
    Hello World!
  8.     
    This is my first CSS example
  9.
（2）内部样式表 
</>复制代码 
  2.   
  3.     
  4.     <span class="hljs-attr">My</span> <span class="hljs-string">CSS experiment</span>
  5.     
  6.   
  7.   
  8.     
    Hello World!
  9.     
    This is my first CSS example
  10.
（3）外部样式表

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

</>复制代码 
  2.   
  3.     
  4.     <span class="hljs-attr">My</span> <span class="hljs-string">CSS experiment</span>
  5.     
  6.   
  7.   
  8.     
    Hello World!
  9.     
    This is my first CSS example
  10.
三、语法内容 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. 1.box-sizing:border-box;
  2. 2..right {margin-left:100px;}
（3）定位布局

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

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

</>复制代码 
  1. relative:
  2. top
  3. right
  4. bottom
  5. left

3）绝对定位

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

</>复制代码 
  1. absolute:
  2. top
  3. right
  4. bottom
  5. left

4）固定定位

</>复制代码 
  1. fixed
（4）伸缩盒布局

display:flex;

GPU云服务器 云服务器 云计算的理解 cdn的理解 对大数据的理解 ajax的理解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115903.html

相关文章

  • 个人分享--web前端学习资源分享

    摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

    sherlock221 评论0 收藏0

  • 写技术博客那点事

    摘要：从现在开始，养成写技术博客的习惯，或许可以在你的职业生涯发挥着不可忽略的作用。如果想了解更多优秀的前端资料，建议收藏下前端英文网站汇总这个网站，收录了国外一些优质的博客及其视频资料。 前言 写文章是一个短期收益少，长期收益很大的一件事情，人们总是高估短期收益，低估长期收益。往往是很多人坚持不下来，特别是写文章的初期，刚写完文章没有人阅读会有一种挫败感，影响了后期创作。 从某种意义上说，...

    ddongjian0000 评论0 收藏0

  • 写技术博客那点事

    摘要：从现在开始，养成写技术博客的习惯，或许可以在你的职业生涯发挥着不可忽略的作用。如果想了解更多优秀的前端资料，建议收藏下前端英文网站汇总这个网站，收录了国外一些优质的博客及其视频资料。 前言 写文章是一个短期收益少，长期收益很大的一件事情，人们总是高估短期收益，低估长期收益。往往是很多人坚持不下来，特别是写文章的初期，刚写完文章没有人阅读会有一种挫败感，影响了后期创作。 从某种意义上说，...

    NSFish 评论0 收藏0

发表评论

登陆后可评论

0条评论

Rango

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<