前段_css
文章平均质量分 68
心郎
目标的不可更改 就决定了手段的多种选择
展开
-
css 引入方式,选择器,选择器的优先级
css引入方式,选择器,选择器的优先级 /** * css有3中写法 * 1 :外联式::新建css 内部引用 (主要写法 推荐) * 1):该写法影响范围比较广,整个站点 * 2):完全实现了html结构与样的分离(代码可维护性比较好) * * 2 :内嵌式 :在头部的style 中书写 * 1):只会影响当前原创 2016-08-28 23:29:16 · 958 阅读 · 0 评论 -
css 四种盒子垂直居中方式
.center{ height: 400px; width: 400px; color: chartreuse; background-color: black; text-align: center; line-height: 400px; box-sizing: border-box; } .div1{ border:原创 2017-04-01 20:45:19 · 3148 阅读 · 1 评论 -
css多列
.newspaper { -webkit-column-count:3; /*被分隔的列数 */ -webkit-column-gap:40px; /*规定列之间的间距*/ -webkit-column-rule:4px outset #ff0000; /* 宽度 样式 颜色 */ -webkit-column-span:3; /*横跨的列数 */ -转载 2017-04-06 01:32:43 · 390 阅读 · 0 评论 -
css3 过渡/旋转/动画
div{ width:200px; height: 200px; line-height:200px; color: chartreuse; text-align: center; } .div1{ background-color: royalblue; /*position: absolute;*/ w原创 2017-04-06 01:18:44 · 5057 阅读 · 0 评论 -
h5 移动端适配3中方式
html{ } body{ background-color: royalblue; box-sizing: content-box; } .a{ height: 19rem; width: 19rem; background-color: aquamarine; } .b{ height: 14rem;原创 2017-04-10 22:12:45 · 717 阅读 · 0 评论 -
css 背景图片相关属性
img{ border: 22px solid red; height: 300px; width: 300px; background:url(../images/cbd.jpg) no-repeat; padding: 50px; /* 保证背景图片最大化的在盒子中等比例显示,但不保证能铺满盒子*/ /*background-size:原创 2016-12-12 16:27:06 · 462 阅读 · 0 评论 -
css 设置浏览器滚动条
/* 设置滚动条的样式 */ ::-webkit-scrollbar { width: 20px; height: 20px; } /* 滚动槽 */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px black; border-radius: 10px;原创 2016-12-11 16:35:29 · 439 阅读 · 0 评论 -
css 容易混淆属性
text-indent: 2em; /* 设置首行缩进两个汉字 Logo优化内容移除*/text-align: center; /* text-align给块级元素设置,其文本会水平居中 */text-decoration: none; /*去掉下划线*/font-style: italic ; /* 文字斜体显示*/font-weight: 700; /* 文字加粗显示*/原创 2016-08-28 23:39:24 · 422 阅读 · 0 评论 -
css 层级 脱标流 可见性
/* * 脱标的盒子居中显示(重点) * 1 首先走父盒子宽度一半 * 2 使用margin-left设置往回走子元素自己宽度的一半 * position: absolute; * left: 50%; * margin-left: -250px; * Z-index(层级) * 1 元素与元素之间的层级关系原创 2016-08-28 23:38:08 · 1811 阅读 · 0 评论 -
css 浮动及定位
/* * 1 文档流(normal flow) * 在标准情况下 块级元素独占一行显示 行内元素在一行上显示 * * 2 浮动(float) * 用法:float:left|right * 特点: * 1 设置的浮动的元素 不占原来的位置(脱离标准流) * 2 可以让块元素在一行上显示 * 3 给一个元素原创 2016-08-28 23:36:35 · 976 阅读 · 0 评论 -
css 行高以及盒模型
#a1{ width: 1000px; height: 300px; background-color: pink; font-size: 30px; line-height: 300px;/* 行高*/ text-align: center; /*内容水平居中*/ } #a2{ font-size: 50px; line原创 2016-08-28 23:34:40 · 663 阅读 · 0 评论 -
css 标签分类以及模式转换
<!-- 问题 : 1 标题标标签中的文字不能直接使用父元素中的文字大小 ???? 发现可以 2 标签集成问题 --> /** * * html标签分类:块级元素 行内元素 行内块元素 * * html元素之间的模式转换 :块级元素 行内元素 行内块元素 * * css特性: * 1 层叠行: 当同一个标原创 2016-08-28 23:32:28 · 729 阅读 · 0 评论 -
div模拟textarea文本域轻松实现高度自适应
demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo1.html因为textarea不支持自适应高度,就是定好高度或者是行数之后,超出部分就会显示滚动条,看起来不美观。而用DIV来模拟时,首先遇到的问题是:div怎么实现输入功能?可能我们还是第一次见到这个属性contenteditable,如一个普通的block元素上加个cont...转载 2018-07-06 14:06:08 · 225 阅读 · 0 评论