技术文章 | Technical articles

前端培训机构—css源码笔记(三)

一、边框拓展

设置边框圆角 border-radius

边框折叠  border-collapse: collapse ;

三角形制作:等腰三角形  设置一边有颜色,另外三边颜色为透明色transparent

直角三角形,根据直角三角形的角,来设置其颜色,另外两个方向为透明色transparent

如右上角:设置颜色的边为border-top border-right 设置透明色为left bttom

梯形,在设置宽高的情况下,可以设置梯形

二、外边距合并

当给盒子设置margin值,它为距离四个方向的外边距的值;当有相邻的盒子的时候,那么这个margin就是距离相邻盒子的值;当某些方向没有同级的相邻盒子的时候,那么这么margin值,就是相对于父容器来讲的。

4.1 两个同级的盒子,会产生上下外边距合并,以最大的那个为准

4.2 存在嵌套的盒子,也就是具有后代关系的元素:

解决办法一:给父元素设置border属性

解决办法二:给父元素设置padding属性

解决办法三:给父元素设置overflow:hidden属性

三、体会盒子模型

设置盒子大小为固定值,且设置盒子相关属性时,不会改变盒子整体的宽高;通过减法保证盒子大小不变

 

<head>

 <meta charset="UTF-8">

 <title></title>

 <style type="text/css">

  .wrap{

   /*height:400px;*/

   /*height: 210px;*/

   height: 190px;

   width: 360px;

10     /*padding: 190px 0;*/

11     /*padding-top: 190px;*/

12     padding-top: 170px;

13     border: solid 20px pink;

14     background: red;

15    }

16   

17    .content{

18     background: yellow;

19    }

20   </style>

21  </head>

22  <body>

23   <div>

24    <div>阿斯顿福建撒地方</div>

25   </div>

26  </body>

四、宽度剩余法  height

盒子的高度让内容撑起来; 左侧一致,右侧剩余

图片1.png

<ul>

 <li>习近平同美国总统特朗普通电话</li>

 <li>习近平回信勉励北京体育大学研究生冠军班 全文</li>

 <li>地震了,婚还是要结的</li>

 <li>「天气」明天雨水中场休息,周四周五重新袭扰申城!</li>

 <li>唐山港15月货物吞吐量2.65亿吨</li>

</ul>

 

*{

margin: 0;

10  padding: 0;

11 }

12   

13 /*.news{

14  width: 466px;

15  margin: 100px auto;

16  标准的盒子模型 padding border会将盒子撑大

17  padding-left: 30px;

18  background: yellow;

19  border: dotted 2px red;

20 }

21 */

22   

23 .news{

24  /*设置为怪异盒子,边框和内填充不再会将盒子撑大*/

25  box-sizing: border-box;

26  width: 500px;

27  margin: 100px auto;

28  padding-left: 30px;

29  line-height: 2;

30  background: yellow;

31  border: dotted 2px red;

32 }

 

五、设置居中

文本水平居中:

text-align:center

padding

容器水平居中:

marginauto

pading

文本和容器的垂直居中:

padding去撑

六、布局模型

布局模型与盒子模型一样,是我们的核心与重点的内容;布局模型是在盒子模型基础上进行拓展和布局

布局模型有以下三种,我们分别展开来说:

5.1 流动(flow)布局模型(标准流)

流动模型是一种正常的布局方式,这种布局布局方式按照我们在html中书写标签的顺序,依次执行。且不同元素按照默认的方式进行排列。块状元素独立占有一行,非块状元素从左到右依次排列。

html中标签的分类有两种:容器级标签和文本级标签。

那么,在css中标签元素也有以下三种分类:

块状元素block:

可以设置宽高,具有换行符;

在不设置宽高的情况下,容器默认独立占有一行;设置宽高后,容器为设置宽高的大小(但还是具有换行符)

前面学过的标签是块状元素的有:h1-h6  p  ul-li  ol-li  dl-dt-dd  table  form  div

其他非块状元素设置为块状元素 display:block;

行内元素 inline

不可以设置宽高,和其他非块状元素从左到右依次排列;上下padding 不生效,左右padding 生效

容器默认包裹内容

前面学过的标签是行内元素的有:font b u i em strong ins del s a span

其他非行内元素设置为行内元素 display:inline

行内块元素 inline-block

可以设置宽高,和其他非块状元素从左到右依次排列;

在不设置宽高的情况下,容器默认包裹内容;设置宽高后,容器为设置宽高的大小(和其他非块状元素从左到右依次排列)

前面学过的标签是行内块元素的有:img  input  textarea  select  button

其他非行内块元素设置为行内块元素 display:inline-block;

<body>

<p>哈哈哈,我是一个特殊的元素</p>

<span>我不是块状元素</span>

<input type="text" name="" id="" value="" />

<a href="">我也不是</a>

asdfhlksad

<img src="./images/aaa.jpg"/>

<button>按钮</button>

</body>

 

<style type="text/css">

p{

 /*设置行内后宽高失效*/

 /*display: inline;*/

 /*设置行内块宽高生效*/

 display: inline-block;

 width: 800px;

 height: 30px;

 background: yellow;

10  }

11   

12  a{

13   /*display: block;*/

14   display: inline-block;

15   width: 300px;

16   height: 30px;

17   background: red;

18   }

19   

20  img{

21   height: 300px;

22   }

23   

24  input{

25   width: 200px;

26   height: 40px;

27   border: solid 1px;

28     

29   outline: none;

30  }

31   

32  button{

33   width: 100px;

34   height: 30px;

35   background: palegreen;

36   border:solid 1px;

37   border-radius: 10px;

38   /*外轮廓线*/

39   outline: none;

40  }

41 </style>

42 

 

5.2 浮动(float)模型

浮动可以使元素脱离标准流,并且可以改变元素的默认类型(可以使元素具有块状元素的特点,可以设置宽高);可以使块状元素在同一行内根据设置依次排列

浮动出现的初衷是为了解决文字环绕的效果;

浮动可以使元素紧密排列;

浮动使元素依次贴边显示;

 

浮动使用属性float:

属性值有 left  right  none(默认)

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

  body{

   margin: 0;

   padding: 0;

  }

 

10    .container{

11     height: 200px;

12     border: solid 1px;

13    }

14   

15    .container>div{

16     /*设置左浮动*/

17     float: left;

18     /*设置右浮动*/

19     /*float: right;*/

20     height: 200px;

21     width: 200px;

22    }

23   

24    .container>.box1{

25     background: red;

26    }

27   

28    .container>.box2{

29     background: pink;

30    }

31   

32    .container>.box3{

33     /*重新设置样式层叠掉上面的样式*/

34     float: right;

35     background: blue;

36    }

37   

38   

39  </style>

40 </head>

41 <body>

42  <div>

43   <div>盒子1</div>

44   <div>盒子2</div>

45   <div>盒子3</div>

46  </div>

47 </body>

浮动使元素脱离了文档流,那么这里有一个属性可以用来清除浮动

clear: left | right | both;

48  <head>

49   <meta charset="UTF-8">

50   <title></title>

51   <style type="text/css">

52    body{

53     margin: 0;

54     padding: 0;

55    }

56   

57    .container{

58     /*height: 200px;*/

59     border: solid 1px;

60    }

61   

62    .container>div{

63     /*设置右浮动*/

64     float: right;

65     height: 200px;

66     width: 200px;

67    }

68   

69    .container>.box1{

70     background: red;

71     /*清除浮动*/

72     /*clear: both;*/

73    }

74   

75    .container>.box2{

76     background: pink;

77     /*清除浮动*/

78     clear: right;

79    }

80   

81    .container>.box3{

82     /*重新设置样式层叠掉上面的样式*/

83     /*float: right;*/

84     background: blue;

85     /*清除浮动*/

86     clear: both;

87    }

88   </style>

89 </head>

90 <body>

91   <div>

92    <div>盒子1</div>

93    <div>盒子2</div>

94    <div>盒子3</div>

95   </div>

96   <p>我是container下面的文字我是container下面的文字我是container下面的文字我是container下面的文字我

97    container下面的文字我是container下面的文字我是container下面的文字我是container下面的文字我

98    container下面的文字我是container下面的文字我是container下面的文字我是container下面的文字我

99    container下面的文字我是container下面的文字我是container下面的文字我是container下面的文字我

100    container下面的文字</p>

101 </body>

 

但是随浮动而来,也出现了问题,会造成父元素塌陷问题;如果解决这个问题,就变成我们需要研究一个课题:

1. 给容器设置一个高度,但是要保证这个高度,要超过所有子元素的高度

2. 给容器后面相邻的元素,清除浮动clear:both

102 conAfter{

103  clear: both;

104 }

这种方式,虽然可以使整体能够正确排列,但是并没有解决父元素塌陷问题

3. 在父元素的内部设置一个空元素

105 <div>

106    <div>盒子1</div>

107    <div>盒子2</div>

108    <div>盒子3</div>

109        <div class="clear"></div>

110 </div>

111 

112 .clear{

113   clear: both;

114 }

这种方式可以解决父元素塌陷问题,但是需要增加一对标签,如果浮动地方特别多,那么就需要添加过多的空标签,影响加载时间和性能,不建议使用

4. 通过伪元素:after

115 <div class="container clear">

116  <div>盒子1</div>

117  <div>盒子2</div>

118  <div>盒子3</div>

119 </div>

 

120 /*利用伪元素:after解决塌陷问题*/

121 .clear:after{

122  display: block;

123  height: 0;

124  content: "";

125  clear: both;

126  /*元素占位不可见*/

127  visibility: hidden;

128 }

这种方式是最高大上的一种,它不会带来一些副作用,在工作中建议大家使用这种方式;

 

5. 使用overflow:hidden || scroll || auto

129 <div class="container clear">

130  <div>盒子1</div>

131  <div>盒子2</div>

132  <div>盒子3</div>

133 </div>

 

/*利用overflow解决塌陷,属性值 scroll || auto || hidden*/

134 .clear{

135  overflow: auto;

136 }

这种方式会产生一个副作用:overflow本身是设置内容溢出的处理方式,当内容真的溢出容器后,那么如果使用overflow:hidden;那么溢出的内容我们就看不到了。所以不建议使用

5.3 色块布局

137 <!DOCTYPE html>

138 <html>

139  <head>

140   <meta charset="UTF-8">

141   <title></title>

142   <style type="text/css">

143    *{

144     margin: 0;

145     padding: 0;

146    }

147   

148    .main{

149     float: left;

150     height: 800px;

151     width: 70%;

152     /*background-color: red;*/

153    }

154   

155    .main-header{

156     height: 150px;

157     background: skyblue;

158    }

159   

160    .main-details{

161     height: 650px;

162     /*background: yellow;*/

163    }

164   

165    .item1{

166     float: left;

167     width: 49%;

168     height: 300px;

169     margin-top: 25px;

170    }

171   

172    .item1:nth-of-type(1){

173     background: blue;

174    }

175    .item1:nth-of-type(2){

176     background:gray;

177    }

178    .item1:nth-of-type(3){

179     background: #E3E3E3;

180    }

181    .item1:nth-of-type(4){

182     background: blue;

183    }

184   

185    .ml{

186     margin-left: 2%;

187    }

188   

189    .right{

190     /*float: left;

191     margin-left: 2%;*/

192     

193     float: right;

194     height: 800px;

195     width: 28%;

196     background-color: palegreen;

197    }

198   </style>

199  </head>

200  <body>

201   <div id="wrap">

202    <!--主要内容部分-->

203    <div>

204     <!--主要内容头部-->

205     <div>

206     

207     </div>

208     

209     <!--主要内容详细内容-->

210     <div>

211      <div></div>

212      <div class="item1 ml"></div>

213      <div></div>

214      <div class="item1 ml"></div>

215     </div>

216    </div>

217   

218    <!--右边栏-->

219    <div>

220     

221    </div>

222   </div>

223  </body>

224 </html>

web前端视频教程,请添加微信“haomei0452”免费领取


微信个人号二维码.jpg

关注微信公众号“icketang”,获取最新前端资讯,学习资料

B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg

上一篇文章: web前端培训—css源码笔记(二)
下一篇文章: css源码笔记(四)——前端培训机构
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>