![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
Muzilh
加油鸭
展开
-
纯css绘制一个三角形
这是一个边框为 100px 的 div <div class="sss"> </div> .sss{ width: 100px; height: 100px; border-width: 50px; borde...原创 2018-08-12 12:49:40 · 4671 阅读 · 1 评论 -
用css隐藏元素的四种方法
1.opacityopacity是设置一个元素的透明度,这一设置为0只能从视觉上隐藏元素,而元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互。2.visibility该属性值为hidden的时候,元素将会隐藏,也会占据着自己的位置,并对网页的布局起作用,与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏。如果一个元素的 visi...原创 2018-08-20 18:34:33 · 5752 阅读 · 0 评论 -
css两栏布局
1.浮动布局左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度。<div class="one"></div><div class="two"></div> .one{ float: left; wid...原创 2018-08-20 18:17:24 · 3386 阅读 · 0 评论 -
CSS Sprites
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。 CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,...原创 2018-08-13 17:10:01 · 205 阅读 · 0 评论 -
BFC和IFC
BFCBFC(Block Formatting Context)叫做“块级格式化上下文”。BFC的布局规则如下: 内部的Box会在垂直方向,一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的左外边缘(margin-left), 与包含块的左边(contain box left)相接触(对于从...原创 2018-08-13 13:05:39 · 1023 阅读 · 0 评论 -
理解CSS盒模型
基本概念盒模型是有两种标准的,一个是标准模型,一个是IE模型。标准模型中,盒模型的宽高只是内容(content)的宽高IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高 css如何设置两种模型 /* 标准模型 */ box-sizing:content-box; /*IE模型*/ b...原创 2018-08-13 11:59:52 · 203 阅读 · 0 评论 -
圣杯布局和双飞翼布局
圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实现的效果是一样的,差别在于其实现的思想。直接看例子吧:1.圣杯布局 <div class="header">header</div> <div class="body"> <div...原创 2018-08-15 20:22:42 · 97 阅读 · 0 评论 -
css选择器优先级
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性同一级别中后写的会覆盖先写的样式内联样式表的权值为 1000 ID 选择器的权值为 100 Class 类选择器的权值为 10 HTML 标签选择器的权值为 1CSS选择器的解析原则 以前一直认为选择器的定位DOM元素是从左向...原创 2018-08-17 22:26:17 · 108 阅读 · 0 评论 -
清除浮动
1、给父级元素添加一个高度;不推荐这种方法。高度无法确定,一次次地试高度很麻烦,何况不能从本质上解决问题。2、在最后一个子元素后加一个空的div,给他添加样式clear,清除两侧浮动;这种方法也很有效,但是加了一个空的div,造成代码的冗余。3、父级元素添加overflow:hidden;overflow是溢出管理的意思,但是有一点不好,在有下拉菜单的时候,下拉菜单会显示不出来...原创 2018-08-17 22:17:45 · 89 阅读 · 0 评论 -
css——position五种属性及特点
w3c中获取定义:static : 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。inherit:规定应该从父元素继承 position 属性的值。fixed :生成绝对定位的元素,相对于浏览器窗口进行定位。(元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定...转载 2018-08-17 21:45:12 · 504 阅读 · 0 评论 -
flex属性
css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记最近在研究css3的flex。遇到的flex:1;这一块,很是很纠结,flex-grow、flex-shrink、flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了。网上大部分解释是flex-grow 是扩展比率flex-shrink 是收缩比率flex-basis 伸缩基...转载 2018-08-08 12:29:37 · 96 阅读 · 0 评论 -
css水平垂直居中
水平居中1.行内元素为父元素设置text-align:center <div class="outer"> <span>行内水平居中</span> </div> .outer{ text-align: center } ...原创 2018-08-08 10:49:38 · 130 阅读 · 0 评论 -
css绘制常见的形状和图案
1.矩形 .square{ width: 100px; height: 50px; background: red }2. 正方形 .rectangle{ width: 100px; height: ...原创 2018-08-20 21:42:48 · 1930 阅读 · 0 评论