<pre data-source-line="2"><code class="hljs"><br class="Apple-interchange-newline"><span class="maxima"> <span class="hljs-built_in">color <span class="zh-hans">设置文字的颜色,如: <span class="hljs-built_in">color:red;
<span class="hljs-built_in">font-size <span class="zh-hans">设置文字的大小,如:<span class="hljs-built_in">font-size:12px;
<span class="hljs-built_in">font-family <span class="zh-hans">设置文字的字体,如:<span class="hljs-built_in">font-family:'<span class="zh-hans">微软雅黑';
<span class="hljs-built_in">font-<span class="hljs-built_in">style <span class="zh-hans">设置字体是否倾斜,如:<span class="hljs-built_in">font-<span class="hljs-built_in">style:'normal'; <span class="zh-hans">设置不倾斜,<span class="hljs-built_in">font-<span class="hljs-built_in">style:'italic';<span class="zh-hans">设置文字倾斜
<span class="hljs-built_in">font-weight <span class="zh-hans">设置文字是否加粗,如:<span class="hljs-built_in">font-weight:bold; <span class="zh-hans">设置加粗 <span class="hljs-built_in">font-weight:normal <span class="zh-hans">设置不加粗
line-<span class="hljs-built_in">height <span class="zh-hans">设置文字的行高,设置行高相当于在每行文字的上下同时加间距, <span class="zh-hans">如:line-<span class="hljs-built_in">height:24px;
<span class="hljs-built_in">font <span class="zh-hans">同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: <span class="hljs-built_in">font<span class="zh-hans">:是否加粗 <span class="zh-hans">字号/<span class="zh-hans">行高 <span class="zh-hans">字体;如: <span class="hljs-built_in">font:normal 12px/36px '<span class="zh-hans">微软雅黑';
text-decoration <span class="zh-hans">设置文字的下划线,如:text-decoration:none; <span class="zh-hans">将文字下划线去掉
text-indent <span class="zh-hans">设置文字首行缩进,如:text-indent:24px; <span class="zh-hans">设置文字首行缩进24px
text-align <span class="zh-hans">设置文字水平对齐方式,如text-align:<span class="hljs-built_in">center <span class="zh-hans">设置文字水平居中
text-overflow <span class="zh-hans">设置一行文字宽度超过容器宽度时的显示方式,如:text-overflow:clip <span class="zh-hans">将多出的文字裁剪掉 text-overflow:ellipsis <span class="zh-hans">将多出的文字显示成省略号
white-<span class="hljs-built_in">space <span class="zh-hans">一般用来设置文本不换行,如:white-<span class="hljs-built_in">space:nowrap <span class="zh-hans">设置文本不换行 <span class="zh-hans">一般与text-overflow<span class="zh-hans">和overflow<span class="zh-hans">属性配合使用来让一行文字超出宽度时显示省略号
list-<span class="hljs-built_in">style <span class="zh-hans">一般用来设置去掉ul<span class="zh-hans">或者ol<span class="zh-hans">列表中的小圆点或数字 <span class="zh-hans">如:list-<span class="hljs-built_in">style:none
<span class="hljs-built_in">width <span class="zh-hans">设置盒子内容的宽度,如: <span class="hljs-built_in">width<span class="zh-hans">:100px;
<span class="hljs-built_in">height <span class="zh-hans">设置盒子内容的高度,如: <span class="hljs-built_in">height<span class="zh-hans">:100px;
<span class="hljs-built_in">border-top <span class="zh-hans">设置盒子顶部边框的三个属性 <span class="zh-hans">如:<span class="hljs-built_in">border-top:5px solid red;<span class="zh-hans">设置盒子顶部边框为<span class="hljs-number">3<span class="zh-hans">像素宽的红色的实线,详细设置说明:盒子模型
<span class="hljs-built_in">border-left <span class="zh-hans">设置盒子左边边框的三个属性 <span class="zh-hans">如:<span class="hljs-built_in">border-left:3px dotted red;<span class="zh-hans">设置盒子左边边框为<span class="hljs-number">3<span class="zh-hans">像素宽的红色的点线,详细设置说明:盒子模型
<span class="hljs-built_in">border-right <span class="zh-hans">设置盒子右边边框的三个属性 <span class="zh-hans">如:<span class="hljs-built_in">border-right:2px dashed red;<span class="zh-hans">设置盒子右边框为<span class="hljs-number">2<span class="zh-hans">像素宽的红色的虚线,详细设置说明:盒子模型
<span class="hljs-built_in">border-bottom <span class="zh-hans">设置盒子底部边框的三个属性 <span class="zh-hans">如:<span class="hljs-built_in">border-bottom:1px solid red;<span class="zh-hans">设置盒子底部边框为<span class="hljs-number">1<span class="zh-hans">像素宽的红色的实线,详细设置说明:盒子模型
<span class="hljs-built_in">border <span class="zh-hans">同时设置盒子的四个边框,如果四个边的样式统一就使用它 <span class="zh-hans">如:<span class="hljs-built_in">border:1px solid #<span class="hljs-number">000 <span class="zh-hans">设置盒子四个边都是<span class="hljs-number">1<span class="zh-hans">像素宽的黑色实线,详细设置说明:盒子模型
padding <span class="zh-hans">设置盒子四个边的内边距 <span class="zh-hans">如:padding:10px 20px 30px 40px <span class="zh-hans">分别设置盒子上边(10px)<span class="zh-hans">、右边(20px)<span class="zh-hans">、下边(30px)<span class="zh-hans">、左边(40px)<span class="zh-hans">的内边距(<span class="zh-hans">顺时针)<span class="zh-hans">,详细设置说明:盒子模型
margin <span class="zh-hans">设置盒子四个边的外边距 <span class="zh-hans">如:margin:10px 20px 30px 40px <span class="zh-hans">分别设置盒子上边(10px)<span class="zh-hans">、右边(20px)<span class="zh-hans">、下边(30px)<span class="zh-hans">、左边(40px)<span class="zh-hans">的外边距(<span class="zh-hans">顺时针)<span class="zh-hans">,详细设置说明:盒子模型
overflow <span class="zh-hans">设置当子元素的尺寸超过父元素的尺寸时,盒子及子元素的显示方式 <span class="zh-hans">如:overflow:hidden <span class="zh-hans">超出的子元素被裁切,详细设置说明:元素溢出
<span class="hljs-built_in">display <span class="zh-hans">设置盒子的显示类型及隐藏,如:<span class="hljs-built_in">display:<span class="hljs-built_in">block <span class="zh-hans">将盒子设置为以块元素显示 <span class="hljs-built_in">display:none <span class="zh-hans">将元素隐藏,详细设置说明:元素类型
<span class="hljs-built_in">float <span class="zh-hans">设置元浮动 <span class="zh-hans">如:<span class="hljs-built_in">float:left <span class="zh-hans">设置左浮动 <span class="hljs-built_in">float:right <span class="zh-hans">设置右浮动,详细设置说明:元素浮动
clear <span class="zh-hans">在盒子两侧清除浮动 <span class="zh-hans">如:clear:both <span class="zh-hans">在盒子两侧都不允许浮动,详细设置说明:元素浮动
<span class="hljs-built_in">position <span class="zh-hans">设置元素定位 <span class="zh-hans">如:<span class="hljs-built_in">position:relative <span class="zh-hans">设置元素相对定位,详细设置说明:元素定位
<span class="hljs-built_in">background <span class="zh-hans">设置元素的背景色和背景图片,如:<span class="hljs-built_in">background:url(bg.jpg) cyan;<span class="zh-hans">设置盒子的背景图片为bg.jpg<span class="zh-hans">,背景色为cyan<span class="zh-hans">,详细设置说明:元素背景
<span class="hljs-built_in">background-size <span class="zh-hans">设置盒子背景图的尺寸,如:<span class="hljs-built_in">background-size:30px 40px;<span class="zh-hans">设置背景图的尺寸宽为30px<span class="zh-hans">,高为40px<span class="zh-hans">,这个属性不能合到<span class="hljs-built_in">background<span class="zh-hans">属性中,详细设置说明:retina<span class="zh-hans">屏适配
<span class="hljs-built_in">opacity <span class="zh-hans">设置元素整体透明度,一般为了兼容需要加上filter<span class="zh-hans">属性设置 <span class="zh-hans">如:<span class="hljs-built_in">opacity:<span class="hljs-number">0.1;filter:alpha(<span class="hljs-built_in">opacity=<span class="hljs-number">10)
cursor <span class="zh-hans">设置鼠标悬停在元素上时指针的形状 <span class="zh-hans">如:cursor:pointer <span class="zh-hans">设置为手型
outline <span class="zh-hans">设置文本输入框周围凸显的蓝色的线,一般是设为没有 <span class="zh-hans">如:outline:none
<span class="hljs-built_in">border-<span class="hljs-built_in">radius <span class="zh-hans">设置盒子的圆角 <span class="zh-hans">如:<span class="hljs-built_in">border-<span class="hljs-built_in">radius:10px <span class="zh-hans">设置盒子的四个角为10px<span class="zh-hans">半径的圆角,详细设置说明:css<span class="zh-hans">圆角
<span class="hljs-built_in">box-shadow <span class="zh-hans">设置盒子的阴影,如:<span class="hljs-built_in">box-shadow:10px 10px 5px 2px pink;<span class="zh-hans">设置盒子有粉色的阴影,详细设置说明:css<span class="zh-hans">阴影
transition <span class="zh-hans">设置盒子的过渡动画,如:transition:all 1s ease;<span class="zh-hans">设置元素过渡动画为<span class="hljs-number">1<span class="zh-hans">秒完成,所有变动的属性都做动画,详细设置说明:过渡动画
<span class="hljs-built_in">animation <span class="zh-hans">设置盒子的关键帧动画,详细设置说明:关键帧动画
<span class="hljs-built_in">transform 设置盒子的位移、旋转、缩放、斜切等变形,如:transform:rotate(45deg);设置盒子旋转45度,详细设置说明:元素变形
box-sizing 设置盒子的尺寸计算方式,如:box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算,此时width和height的值就是盒子的实际尺寸
border-collapse 设置表格边框是否合并,如:border-collapse:collapse,将表格边框合并,这样就可以制作1px边框的表格。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。