H5C3常用技巧总结(必看)

li小圆点样式设置

list-style: 样式x;
样式x内容有以下几种:
  none 去掉圆点
  circle 空心圆
  decimal 数字
  square 正方形

body默认外边距margin设置

body {
  margin: 0px;
  padding: 0;
} 

外边距妙用:居中元素

margin: 0 auto;

元素(盒子)具体大小计算

盒子实际大小 = margin+border+padding+内容宽度 

盒子(div为例)画圆(依据这种画法,可以画出各种div的变形情况):

/*圆角: 左上 右上 右下 左下  顺时针方向
  border-radius: 50px 50px 50px 50px;
  圆圈: 圆角 = 半径*/
div {
   width: 100px;
   height: 100px;
   border: 5px solid red;
   //只设置一个参数的情况,代表四个角都是100px。即可画成一个圆
   border-radius: 100px; 
}

 块级元素特点

1.独占一行(前后都有换行符)

2.高度、宽度、内外边距个方向可以自由控制

3.默认宽度是父容器的100%

4.里面可以放行内元素、行内块元素或块级元素(注:文字类标签里面不能放块级元素)

 行内元素特点

1.一行可以有多个行内元素(前后无换行符)

2.同行的多个元素之间有间隙,但可以通过设置margin值进行解决

3.不能单独设置宽高,元素大小是根据元素内文本决定

4.margin属性:竖直方向无效、水平方向有效

5.padding属性:竖直方向、水平方向有效

6.行内元素内只能放文本或者行内元素(注:a标签可以放块级元素)

行内块元素特点

1.相邻的行内元素在一行上,一行可以有多个行内元素,但之间有空隙

2.默认的宽度由内容决定,但是可以设置其宽度、高度

3.各方向的margin和padding都有效 

父盒子塌陷问题解决办法之一

利用clear进行清除浮动元素

clear: right;  右侧不允许有浮动元素
clear: left;   左侧不允许有浮动元素
clear: both;   两侧不允许有浮动元素
clear: none;

 父盒子塌陷问题解决办法之二

增加父级元素的高度(粗暴)

父盒子塌陷问题解决办法之三

在父级元素之前增加一个空的div标签,用于清除浮动

<style>

        div {

                margin:10px;

                padding:5px;

        }

        #father {

                父元素自己的基础样式

        }

</style>

父盒子塌陷问题解决办法之四

在父级元素样式中增加一行:

overflow:hidden; 

父盒子塌陷问题解决办法五(推荐)

在父类添加一个伪类:afte
#father {
    border: 1px #000000 solid;
 }
 #father:after {
    content: '';
    display: block;
    clear: both;
}

display和float对比

display:方向不可以控制。按照元素特性进行排列(常用于解决一行内的元素排列)

dloat:浮动起来的元素会脱离标准文档流。所以需要解决父级边框塌陷的问题

相对定位特性

相对定位是相对于原来的位置,进行指定的偏移。

相对定位:仍然是在标准文档流中,原来的位置会被保留(具体的可以此专栏的其他文章总结) 

绝对定位特性

1.没有父级元素的前提下,相对于浏览器定位

2.假设父级元素存在定位,通常会相对于父级元素进行偏移

3.绝对定位移动,是在父级元素范围内移动

 强制显示优先级

z-index: 1;

猜你喜欢

转载自blog.csdn.net/qq_41171409/article/details/123364954