CSS
关注
分享
扫一扫
文章平均质量分 78
别忘了缩进
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
20 个常用的 CSS 技巧
20 个常用的 CSS 技巧2018-01-02JavaScript1. 黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？img.desaturate{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: gr转载 2018-01-31 10:35:47 · 324 阅读 · 0 评论 -
CSS-15.盒子居中和内容居中
盒子居中实例演示：.all{border: 1px solid ;height: 500px;width: 500px;background-color: red;margin: 0 auto;}.content{width: 200px;height: 200px;background-color: green;margin: 15原创 2018-01-29 09:37:43 · 2373 阅读 · 1 评论 -
CSS-16.清空默认边距
什么是默认边距：当你设置一个div时，并没有给设置padding和margin属性，但是此时此刻就是有外边距，打开开发者工具：这就是默认边距。为什么清空默认边距：在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等，所以在企业开发中，编写代码之前第一件事情就是清空默认的边距。如何清空：在我们平常练习的时候可以使用通配符选择器来给margin和paddin原创 2018-01-29 09:37:53 · 5646 阅读 · 0 评论 -
CSS-17.行高和字号
行高就是文字行自身的高度，文字在行高中是垂直居中的，当设置单行文字在所属块中垂直居中，设置行高line-height:;的值与块高相同即可。*{padding: 0px;margin: 0px;}.class{width: 200px;height: 200px;background-color: #24ccff;line-height:200px;}原创 2018-01-29 09:38:07 · 656 阅读 · 0 评论 -
CSS-18.根据现有字体，通过FW还原字体字号行高
仿制：还原字体：截图，打开FW载入图片首先调整字体字号与要仿制的文字相同并完全覆盖（第一行即可）此时我们就得到了行高和字体大小以及字体现在分析边距在上面已经测出来行高，在FW测量顶部到字体的距离是30px，字体自带行高为30px,重叠区域的高为10px,那么padding-top:20px;原创 2018-01-29 09:38:16 · 281 阅读 · 0 评论 -
CSS-19.网页布局方式
网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的标准流（文档流/拓扑流）排版方式1.标准流其实就是浏览器默认的排版方式2.在css中将元素分为3类，分别是块级元素/行内元素/行内块级元素3.标准流排版方式有两种，一种是垂直排版（元素是块级元素），一种是水平排版（元素是行内 元素/行内块级元素）浮动流排版方式1.浮动流是一种“半脱离标准流”原创 2018-01-30 09:27:02 · 207 阅读 · 0 评论 -
浮动实战
要求：分析（看蓝色区域）：浮动实战练习*{padding: 0px;margin: 0px;}.head{width: 980px;height: 100px;/*background-color: pink;*/margin: 0 auto;margin-bottom: 10px;原创 2018-01-30 09:27:12 · 224 阅读 · 0 评论 -
CSS-21.清除浮动的常用方式（隔墙法）
隔墙法：外墙法：1.在两个盒子中间添加一个额外的块级元素2.给这个额外添加的块级元素设置clear:both;属性注意点：外墙法它可以让第二个盒子使用margin-top属性外墙法不可以让第一个盒子使用margin-bottom属性内墙法：1.在第一个盒子中所有子元素最后添加一个额外的块级元素2.给这个额外添加的块级元素设置clear:bot原创 2018-01-30 09:27:34 · 973 阅读 · 0 评论 -
CSS-23.清除浮动的常用方式（伪元素内墙）
通过利用伪元素选择器来清除浮动标签名称::after{/*设置添加的子元素内容为空*/ content: ""; /*设置添加的子元素为块级元素*/ display: block;/*设置添加的子元素高度为0*/ height: 0;/*隐藏添加的子元素*/visibility: hidden; /*给添加的子元素设置cl原创 2018-01-30 09:27:58 · 317 阅读 · 0 评论 -
CSS-24.a标签的伪类选择器
伪类选择器,专门修改a标签不同状态的样式1.从未访问过 :link2.访问过 :visited3.鼠标按住不放 :active4.悬停 :hover编写顺序爱恨原则,注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。注意点：a标签伪类选择器的注意点:1. 伪类选择器可以单独出现,也可以多个原创 2018-01-30 09:28:09 · 340 阅读 · 0 评论 -
CSS-25.transition过渡模块
过渡有什么意义？例如代码：div{height:100px;width:100px;background-color: red;}div:hover{height:300px;width:300px;background-color: blue;}观察上面代码可知，当鼠标悬停在Div上的时候，div会立即放大三倍且颜色变成蓝色原创 2018-01-30 09:28:19 · 236 阅读 · 0 评论 -
CSS-26.2D转换-transform属性
2D转换时指旋转，平移，缩放及其组合代码：Title*{margin: 0;padding: 0;}ul{margin: 0 auto;height: 500px;width: 500px;border: 1px solid #000;}li{width: 100px;height: 40px;background原创 2018-01-30 09:28:30 · 282 阅读 · 0 评论 -
盒子练习（重点掌握）
练习题制作一个500*500px的红色大盒子，中间有个200*200px的小盒子，小盒子是水平垂直居中在大盒子中的。方法1：原理：在大盒子中设置内边距的值为150px，相应的在height和width的值上减去两倍的150，也就是300。练习.all{height: 200px;width: 200px;background-co原创 2018-01-29 09:37:36 · 579 阅读 · 0 评论 -
CSS-14.盒子模型的宽高问题和box-sizing属性
内容宽高：例如：红色框选就是内容宽高元素宽高同样是上面的代码，红色框就是元素宽高，为什么不加margin，以为外边距，是不算在div中的当我们在已经设置好样式的时候，这是如果修改，就会导致变形，使用css3中的box-sizing属性就可以避免变形的问题格式和取值：box-sizing:content-box;这个是默认值，默原创 2018-01-29 09:37:20 · 330 阅读 · 0 评论 -
CSS-13.css内边距，外边距属性
内边距：格式：非连写：padding-top: ;padding-right: ;padding-bottom: ;padding-left: ;连写：padding：上 右 下 左；注意点：给标签设置内边距之后，标签占有的宽度和高度会发生变化，当连写padding的时候，只写top的值，所有的值就等于top，写了top和righ原创 2018-01-29 09:37:07 · 493 阅读 · 0 评论 -
CSS-1.文字属性的使用
/* 一般style会用到两种取值来调整文字样式，normal(正常)italic（倾斜） */ font-style:normal;/*weight属性是调整文字胖瘦，一般取值为bold，默认值是lighter细线，最高值是bolder比粗更粗*/font-weight:bold;/*size是用来调整大小，取值为多少多少px（相似*/font-size:100px;原创 2018-01-28 11:01:51 · 208 阅读 · 0 评论 -
css-2.文本属性的使用
/*text-decoration有四个值：none（默认），underline（下划线），line-through（删除线），overline（上划线）*/text-decoration: none;/*水平对齐的属性有三个值：left（默认）center，right*/text-align: left;/*缩进：开头缩进两个文字，就是选择2em*/text-indent原创 2018-01-28 11:02:54 · 157 阅读 · 0 评论 -
CSS-3.选择器的使用
标签选择器：直接选择某一种标签，然后全部进行修改样式。格式：p{属性名称：属性值 ；}id选择器：给标签设置id属性，然后在css中，对定义了相同id属性的标签进行修饰格式；#id值{属性名称：属性值；}注意点：1.每个HTML标签都有一个属性叫做id属性，每个标签都可以设置id属性2.在同一个界面中，原创 2018-01-28 11:03:56 · 230 阅读 · 0 评论 -
CSS-4.序选择器的使用
css序选择器分为两大阵营，一个是选择同级别的，一个是选择同类型的同级别的第几个：:first-child{}：选中同级别中的第一个标签注意点：不区分类型:last-child{}：选中同级别中的最后一个标签注意点：不区分类型:nth-child(n){}：选中同级别中的第n个标签注意点：不区分类型:nth-last-chil原创 2018-01-28 11:07:51 · 467 阅读 · 0 评论 -
CSS-5.属性选择器
css属性选择器，就是选择相应属性的标签，改变他的样式格式：[属性名]{}例如：[class]{color: red;}class="aa">我是标题class="cc">我是段落class="aa">我是段落class="bb">我是段落class="dd">我是段落class="aa">我是段落我是段落我是段落效果：原创 2018-01-28 11:09:53 · 302 阅读 · 0 评论 -
CSS-6.CSS的三大特性
继承性：父元素的一些属性，子元素也可以使用，这就是我们说的继承性。注意点： 1，并不是所有的属性都可以继承。只有以color/font-/text-/line开头的属性才可以继承。2，在CSS的继承关系中，不仅仅是儿子可以继承，只要是后代，都可以继承 3，继承性中的特殊性a标签的文字颜色和下划线是不能继承的h标签的文字大小是不能继承的应用场景：一般用原创 2018-01-28 11:10:37 · 260 阅读 · 0 评论 -
CSS-7.！important强制提升优先级
！important:用于提升某个直接选中标签的选择器中的某个属性的优先级，可以将某个被指定的属性的优先级提升至最高。注意点：1.important只能用于直接选中，不能用于间接选中2.通配符选择器选中的标签也是直接选中的3.！important只能提升被指定的属性的优先级，其他属性的优先级不会被提升4.！important必须写在属性值的分号前原创 2018-01-28 11:11:27 · 2877 阅读 · 0 评论 -
CSS-8.css权重问题
优先级中的权重：当多个选择器混合在一起使用时，我们可以通过计算权重类判断谁的优先级最高权重的计算规则：1.首先计算选择器中有多少个id，id多的选择器优先级最高2.如果id的个数一样，那么看class的个数，类名个数多的优先级最高3.如果类名的个数也一样，那么再看标签名称的个数，标签名称个数多的优先级高4.如果id个数一样，class个数也一样，标签名称个数也一样，那么原创 2018-01-28 11:12:16 · 192 阅读 · 0 评论 -
CSS-9.转换css元素的显示模式
设置元素的display属性display的取值：block 块级inline 行内inline-block 行内块级快捷键di display :inline;db display:block;dib display:inline-block;原创 2018-01-28 11:13:30 · 254 阅读 · 0 评论 -
CSS-10.背景颜色和背景图片
背景颜色：使用background-color:red;背景图片：使用background-image: url("images/1.jpg");背景图片的平铺方式：使用background-repeat: repeat;一般有四个取值repeat（完全平铺xy），repeat-x（x方向平铺），repeat-y（y方向平铺）和no-repe原创 2018-01-29 09:36:31 · 798 阅读 · 0 评论 -
CSS-11.css精灵图
当网页中有很多图片事，浏览器访问网页，就会发送很多请求报文，这就会降低访问体验，这时我们将很多小图片都放在一张图片上，此时浏览器会少发送很多次请求报文，让我们的使用体验会好很多这就是精灵图。如何使用：使用adobe公司的fireworks来确定你需要选的图片位置过程如下演示代码：CSS精灵图练习div{display: inl原创 2018-01-29 09:36:51 · 1215 阅读 · 0 评论 -
CSS-12.css边框属性（border）
在盒子模型中我们通常会给盒子设置边框属性，使之完成某些功能和样式我们会使用css中的border属性来设置边框一般会通过连写来设置border，他下面还有width,style,color的属性，在开发中，我们会使用连写。写法1：（按照方向）快捷键：bd+border: 1px solid #000; 这样的属性设置，四个边框属性值是相同当然我们也可以分别设置四个边原创 2018-01-29 09:37:01 · 6196 阅读 · 0 评论 -
CSS-27.双飞翼布局
biaoti*{padding: 0px;margin: 0px;}.main,.left,.right{float: left;min-width: 130px;}.main{width: 100%;}.left{width: 200PX;margin-left: -100%;background: blue;}.rig原创 2018-01-30 09:28:40 · 202 阅读 · 0 评论