CSS常用样式笔记

发表于 | 分类于 | 评论数： | 阅读次数：

引言

　　本文是 CSS 学习过程中的笔记之一，主要记录了 Box 模型中常用的属性样式，以及一些容易忽视而又需要注意的情况。本文前后还有其它内容，待后续再做补充。

Box 模型常用的属性

Box 模型常用的属性

1
2
3
4
5
<div class="bg">
  <div class="item">
    Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
div.bg
{
  border:3px solid brown;
  background-color:bisque;
/* 指定bg元素的大小 */
  height:200px;
  width:300px;
}

/* Box 模型的边框和边距 */
div.item
{
  background-color:lightgreen;
  margin:5px;
  margin-top:15px;
/*  此处对比有无 solid 的区别  */
  border:2px solid black;
  border-left:5px solid red;
  border-top:5px green;
/*  对比 padding 与 margin 的区别  */
  padding:5px;
  padding-bottom:1px;
}

/*  Box 模型内容的溢出处理  */
div.bg
{
/*  overflow 参数可选：auto hidden scroll 分别对应 自动 隐藏 显示  */
/*  注意对比 scroll 与 auto 在内容不多时的区别  */
  overflow:auto;
  overflow-x:hidden;
  overflow-y:scroll;
}

Position 的几个参数

Position 属性一般用于确定元素的位置

  • static：默认值，对 top bottom left right 属性不生效
  • relative：相对位置，挪出来的空间不会被其它元素填充
  • fixed：固定位置（含滚动状态），即相对 window 元素的位置
  • absolute：绝对位置，即相对除 static 以外的父元素的位置。如果元素的外一层元素为 static 属性元素，则会继续往外寻找，直到寻找到属性为「非 static」的元素或无更外层元素为止
  • sticky：附着位置，是测试中的属性，显示效果为 relative 与 fixed 的组合，在到达设定的位置边界前表现为 relative 即随页面滚动而滚动；在到达边界后表现为 fixed 即固定位置不随滚动而移动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="bg">
  <div class="item1" id="item">
    Hello World one<br>
    Hello World one<br>
    Hello World one<br>
    Hello World one<br>
  </div>
  <div class="item2" id="item">
    Hello World two<br>
    Hello World two<br>
    Hello World two<br>
    Hello World two<br>
  </div>
  <div class="item3" id="item">
    Hello World three<br>
    Hello World three<br>
    Hello World three<br>
    Hello World three<br>
  </div>
  <div class="item3" id="item">
    Hello World four<br>
    Hello World four<br>
    Hello World four<br>
    Hello World four<br>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/* 用 id 来设置属性选择器 */
#item
{
  border-bottom:2px solid grey;
  padding:3px;
  width:130px;
}

div.bg
{
  position:relative;
  top:50px;
  left:50px;
  
  border:3px solid brown;
  background-color:bisque;
  height:200px;
  width:300px;
  overflow:auto;
}

/*  Box 模型的位置  */
div.item1
{
  position:absolute;
  top:15px;
  left:15px;
}

div.item2
{
/*  注意拉动滚动条时，item2 的位置  */
  position:fixed;
  top:76px;
  left:220px;
  color:DarkTurquoise;
}

div.item3
{
  position:relative;
  top:120px;
  left:15px;
}

水平居中

1
2
3
4
5
6
7
8
<div class="bg">
  <div class="item">
    Hello World one<br>
    Hello World one<br>
    Hello World one<br>
    Hello World one<br>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
div.bg
{
  border:3px solid brown;
  background-color:bisque;
  height:200px;
  width:300px;
}

/* 水平居中 */
div.item
{
  margin-top:5px;
  width:250px;
  border:2px solid grey;
  
/*  div 内部文本水平居中  */
  text-align:center;
/*  div 本身水平居中  */
  margin-left:auto;
  margin-right:auto;
}

块浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul class="feeds">
  <li>
    <div class="avatar">
      <img src="https://feng-bbs-att-1255531212.image.myqcloud.com/2018/11/29/094524m2okncfoeqkj1zv8.png?imageMogr2/thumbnail/64x/format/jpg/interlace/0/quality/100" alt="头像" >
    </div>
    <div class="content">
      十分感谢以上锋友为大家带来有关越狱的干货帖与精华帖，想了解更多相关精彩内容请点击进入各作者主页关注他！有任何问题也可在下方回复并@你想问的大佬，记得要关注才能@到对方喔！
    </div>
  </li>
  <li>
    <div class="avatar">
      <img src="https://feng-bbs-att-1255531212.image.myqcloud.com/2018/11/29/094524m2okncfoeqkj1zv8.png?imageMogr2/thumbnail/64x/format/jpg/interlace/0/quality/100" alt="头像" >
    </div>
    <div class="content">
      十分感谢以上锋友为大家带来有关越狱的干货帖与精华帖，想了解更多相关精彩内容请点击进入各作者主页关注他！有任何问题也可在下方回复并@你想问的大佬，记得要关注才能@到对方喔！
    </div>
  </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
ul.feeds
{
/*  去掉列表中每一项最左边的黑点和留白  */
  padding:0px;
}

/*  设置列表项的属性  */
ul.feeds > li
{
/*  此处注意 display 属性分别为 block 和 table 时的区别  */
  display:table;
  margin-top:2px;
  position:relative;
  width:400px;
  border:2px solid red;
  padding:5px;
/*  按行清除浮动  */
  clear:both;
}

ul.feeds > li div.avatar img
{
/*  设置头像大小  */
  width:50px
}

ul.feeds > li div.avatar
{
/*  设置头像左浮动  */
  float:left;
  width:50px;
}

ul.feeds > li div.content
{
/*  设置文本右浮动  */
  float:right;
  width:340px;
}

后记

　　本文是学习 CSS 相关技术的笔记之一，主要记录 CSS 一些常用的样式及注意事项，仅供自己在后续使用时参考。

显示 Gitment 评论