CSS 常用属性

width & height

这两个属性用来定义元素的宽度和高度，使用很简单

<div style="width:300px;"> 123 </div>
<img src="https://www.baidu.com/img/bdlogo.png" style="height:100px;"/>

但这两个属性并不是所有的元素都生效

对于p、div等独占一行的块元素是可以随意使用的，但是对于span等行内元素是不生效的，行内元素空间靠内容撑开

font、文本

  1. font-size：字体大小
  2. font-family：字体，宋体、微软雅黑、Arial等
  3. font-weight：文字粗度，常用的就是默认值regular和粗体bold
  4. line-height：行高，可以用百分比、倍数或者固定尺寸

 

span{
  line-height: 1.5;
  font-size: 14px;
  font-family: Arial,'微软雅黑','宋体';
  font-weight:bold;
}

Chrome等浏览器规定汉字的最小尺寸是12px，所以设置更小的尺寸都显示为12px

  1. text-align：文本对其方式 left、center、right、justify
  2. text-indent：文案第一行缩进距离
  3. text-decoration： none、underline、line-through、overline
  4. color：文字颜色
  5. text-transform：改变文字大小写none、uppercase、lowercase、capitalize
  6. direction：文本方向，ltr、rtl
  7. word-spacing：可以改变字（单词）之间的标准间隔
  8. letter-spacing：字母间隔修改的是字符或字母之间的间隔
  9. white-space
    1. normal：多个空白符会变为一个，换行变为空格
    2. pre：空白符不被忽略
    3. nowrap：防止元素中的文本换行，除非使用了一个 br 元素

direction和unicode-bidi

 

    font:bold 12px/1.8em Arial;

可以缩写为一句： 但文字缩写一定要具有字号、字体样式这两个属性。行高用/分隔

background

属性 描述
background 简写属性，作用是将背景属性设置在一个声明中
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否及如何重复

  • background-position：默认左上角

    • x y
    • x% y%
    • [top | center | bottom] [left | center | right]

  • background-repeat

    • no-repeat：背景图片在规定位置
    • repeat-x：图片横向重复
    • repeat-y：图片纵向重复
    • repeat：全部重复

 

background-color: #F00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

可以缩写为一句：

  background: #F00 url(background.gif) no-repeat fixed 0 0;

border

  • border-width：边框宽度
  • border-color：边框颜色
  • border-style：边框样式（solid、dashed）

支持合写

border: solid 1px #333;

边框与三角形

.t0{
  margin:30px;
  height:200px;
  width:200px;
  border-top:solid 100px red;
  border-left:solid 100px green;
  border-right:solid 100px orange;
  border-bottom:solid 100px blue;
}

通过demo可以看到border的相交的地方在45deg平分，当元素的width、和height属性呗设置为0的时候

.t1{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 100px red;
  border-left:solid 100px green;
  border-right:solid 100px orange;
  border-bottom:solid 100px blue;
}

这样我们就可以看到三角形了，尝试一下去掉两个边框，值保留上边和左边

.t2{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 100px red;
  border-left:solid 100px green;
}

这时候做三角形好像简单了，只要我们保留两个相邻边，把另外的一个设置为透明就可以了

.t3{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 100px red;
  border-right:solid 100px rgba(0,0,0,0);
}

使用border做三角形

padding

padding代表内边距，有四个方向的值，可以合写

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

值可以是数值也可以是百分比（相对于父容器、不是自身）

padding: 20px; /* padding: 20px 20px 20px 20px; */
padding: 10px 20px; /* padding: 10px 20px 10px 20px; */
padding: 10px 20px 30px; /* padding: 10px 20px 30px 20px; */

margin

外边距，规则和padding一样，但是数值可以是负数，而且父边距在布局中十分有用处

外边距合并

边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

如果这个外边距遇到另一个元素的外边距，它还会发生合并

为什么

水平对齐

对于宽度固定的块元素，设置左右margin值为auto可以达到元素水平对齐的效果

<div style="width:600px;margin:0 auto;"></div>

参考

w3School

results matching ""

    No results matching ""