CSS基础

最新推荐文章于 2024-09-30 13:49:56 发布

weixin_34356138

最新推荐文章于 2024-09-30 13:49:56 发布

阅读量118

点赞数

文章标签：人工智能 php

原文链接：https://juejin.im/post/5d0a4c595188254cf36f1979

版权

层叠样式表（英语：Cascading Style Sheets，简写CSS）

发展历史：

两个人合作发明了 CSS 1994年哈肯·维姆·莱提出了CSS的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计CSS。 W3C 开始接管 CSS
1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。 CSS 2.1
1998年5月W3C发表了CSS2 CSS2.1修改了CSS2中的一些错误，删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。
CSS 3 从 2011 年开始 CSS 被分为多个模块单独升级，统称为 CSS 3。这些模块有： CSS 选择器 level 3 CSS 媒体查询 level 3 CSS Color level 3 更多请搜索 CSS spec
CSS 4? 不好意思，没有 CSS 4，只有各个模块的 level 4

CSS 学习资源

Google: 关键词 MDN
CSS Tricks css-tricks.com/
Google: 阮一峰 css www.google.com/search?q=阮一…
张鑫旭的 240 多篇 CSS 博客 www.zhangxinxu.com/wordpress/c…
Codrops 炫酷 CSS 效果 tympanus.net/codrops/cat…
CSS揭秘 www.ituring.com.cn/book/1695
CSS 2.1 中文 spec
Magic of CSS 免费在线书 adamschwartz.co/magic-of-cs…

css布局

浮动

通过在元素身上加：float: left/right;，达到元素横向排列的目的。

清除浮动

浮动元素不再占有文档流的位置，因此会对后面元素的排版造成影响。清除浮动的几种常用方式：

额外标签法
父级添加overflow属性方法
使用after伪元素清除
使用before和after双伪元素清除

一、额外标签法：

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
复制代码

结构较差，不推荐

二、父级添加overflow属性方法

可以给父级添加： overflow 为 hidden|auto|scroll  都可以实现。
复制代码

三、使用after伪元素清除浮动元素的父元素身上加 clearfix

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
复制代码

或者这样写

clearfix:after{
content: '';
dispaly: block;
clear: both;
}
复制代码

四、使用before和after双伪元素清除和三一样，在浮动元素父元素身上加clearfix

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以触发BFC BFC可以清除浮动 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
复制代码