css属性and盒模型
字体属性
font-family: "Arial Black","微软雅黑","..."; /*第一个不生效就用后面的 写多个备用*/ font-size: 24px; /*字体大小*/ font-weight: bold; /*字体粗细*/ color: red; /*颜色*/ # ps: - 颜色属性值有四种表达方式,英文单词|颜色编号|rgb|rgba - pycharm取色器 or QQ微信截图颜色编号显示功能
文字属性
text-align: center; /*文字居中*/ text-align: right; /*右对齐*/ text-align: left; /*左对齐*/ text-align: justify; /*两端对齐*/ text-decoration: underline; /* 下划线*/ text-decoration: overline; /*上划线*/ text-decoration: line-through; /*删除线*/ text-decoration: none; /*无样式,主要用在a标签上,取消默认的下划线*/ text-indent: 32px; /*首行缩进*/ text-indent: 2em; /*首行缩进2倍的字体大小, em是相对单位*/ line-height: 2em; /*两倍的行间距*/ letter-spacing: 5px; /*字符之间的距离*/ word-spacing: 5px; /*调整英文单词之间的距离*/
背景属性
background-color: red; /*背景颜色*/ background-image: url('') /*背景图片,默认全部铺满*/ background-attachment: fixed; /*固定背景图片位置*/ background-repeat: no-repeat; /*x,y方向都不平铺*/ background-repeat: repeat-x; background-repeat: repeat-y; background-position: center center; /*第一个x方向 第二个y方向*/
如果出现了多个属性名前缀是一样的情况,一般情况下都可以简写,只写前缀
background: red url("222.png") no-repeat center center; /*只需要填上你想要加的参数即可 位置没有关系 参数个数也不做限制 加就显示不加就用默认的设置*/
边框属性
border-width: 5px; border-style: solid; border-color: green; border: 5px solid green; /*简写*/ border-left-width: 5px; border-right-width: 5px; border-top-width: 5px; border-bottom-width: 5px; border-radius: 50%; /*直接写50%即可,长宽一样就是圆,不一样就是椭圆*/
display属性
display: none; /*隐藏标签不展示到前端页面,并且不占用页面的位置,但是还存在文档中*/ display: inline; /*块级标签转为行内标签,具有行内标签的特点*/ display: block; /*行内标签转为块级标签,具有块级标签的特点*/ display: inline-block; /*标签既可以在一行,又具有可以设置宽高*/ # 补充:visibility: hidden <div style="visibility: hidden">单纯的隐藏 位置还在</div>
盒模型
所谓的盒子模型指的是,所有的HTML标签都是一个盒子,具有边距、边框、填充和实际内容。
margin 外边距,标签与标签的间距 border 边框,标签边框 padding 内填充,标签内容到边框的间距 content 标签内容
谷歌浏览器的body默认自带8px的margin,写页面时,一般首先要清除body的margin.
margin: 0; /*上下左右都是0px*/ margin: 10px 20px; /*上下10px, 左右20px*/ margin: 10px 20px 30px; /*第一个上,第二个左右,第三个下 */ margin: 10px 20px 30px 40px; /*上,右,下,左*/ /*每个防线单独设置*/ margin-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; /*水平居中*/ margin: 0 auto; padding和margin类似,都有四个方向间距设置,且规律一毛一样。 border也有四个方向粗细、颜色、线条样式的设置。也支持简写设置,和margin规律一模一样。 border-color: red green blue /*上,左右,下*/ border: none; /*清除边框, 或者 border:0;*/
外边距塌陷
/*上下margin边距不叠加,两个标签之间margin最大的间隔 ----> d1和d2上线间隔50px*/ #d1{ margin-bottom: 50px; } #d2 { margin-top: 20px; }
浮动
浮动的元素没有块级的概念,浮动之后,本身多大就占多大位置;
一般页面布局设计,都是先用浮动前规划好。
float: left; /*左浮动*/ float:right; /*右浮动*/