前端复习(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Lazybones_3/article/details/89326523

块元素标签(行元素)和内联元素标签(行内元素)
块元素:在布局中默认独占一行,宽度默认等于父级宽度,块元素后的块元素换行排列
内联元素:元素之前可以排在一行,设置宽高无效,它的宽高由内容撑开,元素之间默认有小间距,而且是基线对齐(文字底部对齐)

常用块元素标签:
1.标题标签,含有默认外边距和字体大小:h1 h2 h3 h4 h5 h6
2.段落标签,含有默认外边距:p
3.通用块元素标签:div
常用内联元素标签:
1.超链接标签,默认文字蓝色,有下划线:a
2.图片标签,支持宽高设置:img
3.通用内联容器标签:span

块元素居中技巧:
块元素如果想设置相对页面水平居中,可以使用margin中的auto关键字,auto只能用于左右的margin设置,不能用于上下

.box{
	width: 200px;
	height: 80px;
	background: gold;
	margin: 0px auto;
}

设置元素浮动属性
浮动可以让块元素排列在一行,左浮动float:left; 右浮动float:right;

css选择器
1.标签选择器,如:
div {color:red}
2.类选择器,一个类可用于多个元素,一个元素也可以使用多个类,如:

.blue{color:blue}
------
<div class="blue"></div>
3.层级选择器,主要用于标签嵌套的结构
.con span{color:red}
------
<div class="con">
    <span>...</span>
</div>

css文本属性
color设置文字的颜色,如:color:red
font-size设置文字的大小,如:font-size:12px
font-family设置文字的字体,如:font-family:‘Microsoft Yahei’
font-weight设置文字是否加粗,如:font-weght:bold 加粗; font-weight:normal 不加粗
line-height设置文字的行高,如:line-height:24px 表示文字高度加文字上下间距是24px
想要设置文字垂直居中可以将line-height设置为元素高度
text-decoration设置文字下划线,如:text-decoration:none
text-align设置文字水平对齐方式,如:text-align:center设置文字水平居中
text-indent设置文字首行缩进,如;text-indent:24px

猜你喜欢

转载自blog.csdn.net/Lazybones_3/article/details/89326523