![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
WEB前端之CSS
文章平均质量分 62
ll_xiaohanqing_91
这个作者很懒,什么都没留下…
展开
-
CSS-----选择器分类、层叠、特殊性与继承
1. 常用的选择器: 类型选择器----元素选择器或简单选择器:如 p{} 或 h2{} 后代选择器-----特定元素或元素组的后代(所有后代,包括孙代):如 div p{} ID选择器和类选择器 最常用的是:组合使用这类型、后代、ID、类选择器 2. 伪类: 3. 通用选择器:* 为页面上的所有元素应用样式。 4. 高级选择器:CSS2.1原创 2016-03-08 09:29:57 · 589 阅读 · 0 评论 -
CSS---堆叠顺序---position---z-index
通常认为HTML页面是二维的,但实际上,CSS有一个 z-index 属性,允许层叠元素。 层叠的规则如下: 在没有指定 z-index 属性的情况下,所有元素默认在0层渲染。当多个元素的 z-index 属性相同时,将按照以下顺序布局: 普通流(无定位)里的块元素将按其在HTML中出现的顺序堆叠定位元素也是按照其在HTML中出现的顺序堆叠当普通流里的块元素、浮原创 2016-01-27 18:34:02 · 2022 阅读 · 0 评论 -
CSS实现三栏式布局
三栏式布局 要求:左右两栏宽度固定,中间一栏根据父元素宽度填充满,父元素高度取决于三个子元素中最高的高度。 采用两种方法用CSS实现了三栏式布局,下面分别介绍一下这两种方法 方法一: 左列:float:left; 右列:float:right; 中间列:margin-left:左宽度,margin-right:右宽度;父元素:overflow:hidden(清除浮动)详细代码如下原创 2016-07-02 10:45:05 · 643 阅读 · 0 评论 -
CSS盒模型 及 定位position
1. 标准W3C盒子模型:DOCTYPE 声明 内容区域(content)不包括其他部分,width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但会增加元素框的总占有尺寸。 ①IE早期版本的盒子模型(IE6及以下):在混杂模式中使用自己的非标准盒模型 内容区域(content)包括内边距(padding)和b原创 2016-03-14 19:22:06 · 767 阅读 · 0 评论 -
CSS3 利用 @media 查询 实现响应式布局 及 CSS3 box-sizing属性
CSS3媒体查询,实现响应式页面 @media 查询,可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是设置设计响应式的页面。当重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。 @media查询的使用语法 针对不同的媒体,使用不同的样式 @media mediatype and|not|only (media f原创 2016-07-02 20:23:33 · 497 阅读 · 0 评论 -
CSS3----新增特性及其在主流浏览器中的兼容性
1. 选择器:IE6.0及以下不兼容,其它主流浏览器都兼容 新增的属性选择器: [att^='value'] :属性 att 的值以指定值value开始 [att$='value']:属性 att 的值以指定值value结束 [att*='value']:属性 att 的值包含指定值value,而无论其位置原创 2016-04-04 10:55:26 · 795 阅读 · 0 评论 -
CSS3 Flexbox布局
Flexbox布局 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 .box{ display: flex;} 行内元素也可以使用Flex布局: .box{ display: inline-flex;} 利用flexbox布局可以非常简单地实现 元素(.child) 在 容器(.par原创 2016-07-05 11:03:48 · 495 阅读 · 0 评论