CSS基础笔记

 

CSS基础语法

 

Ø css中的方向 ---顺时针方向

Ø 自定义元素属性之前很重要的一点是清楚系统默认的属性，比如清楚系统默认的内边距和外边距。

 

Ø 继承关系：子区域继承父区域的样式，同时，子区域也可以对父区域的样式进行重写，或者说覆盖。

 

Ø 选择器：不同的选择器修饰于同一元素，按照优先级，选择器依次是Id选择器，类选择器，标签选择器。除了三大主流大选择器之外，还有一些旁门左道选择器。比如为了精确选择而诞生的后代选择器，为了精简代码而诞生的群组选择器，以及广泛使用的伪类选择器和伪元素选择器。

 

CSS3常用的属性

Ø 文本和字体

a. 字体颜色 --- color，包括字面值模式red和rgb模式#FFF

b. 字体粗细 --- font-weight，包括normal和bold

c. 字体大小 --- font-size，包括绝对大小px和相对大小em

d. 段落缩进 --- text-indent，单位推荐用em不要用px

e. 字体的样式 --- font-style。

f. 行高 --- line-height，浏览器默认的行高比较小，大段文字显得比较密集。需要重新调整。可以使用像素px也可以使用相对于浏览器默认行高的百分比，比如150%，表示现在的行高是浏览器默认行高的1.5倍。行高的一大用处就是设置内容垂直居中。操作是使得行高等于段落或者标题的高度。height:100px;  line-height:100px;

 

Ø 边框和背景（适用于区块或者图片）

1) 边框设置需要设置边框线宽度，边框线型，边框颜色。三者缺一不可。比如

border:2px dotted #FFF。

2) 可以给边框设置圆角，border-radius:5%，当百分数达到50%时就变成了一个圆。当然圆角半径也可以用绝对值px表示。

3) 边框的另一种用法就是分割线border-left，left-right，left-top，left-bottom。

4) 可以使用背景当图片background:url(picture.png)，如果屏幕尺寸远远大于图片尺寸，可以放置不止一张图片，如果不设置background-repeat，那么图片会铺满屏幕。

 

Ø 元素定位

1) CSS中存在两类元素:行内元素和块状元素。如p就是一个块状元素而span是一个行内元素。可以设置背景色来观察它们之间的区别：对自身需求空间是不一样的。块级元素和行内元素可以相互转化，途径是display。display:inline，将块级元素转化成行内元素，display:block将行内元素转换块级元素。块级元素可以包含行内元素，可是行内元素不可以包含块级元素。可以给块级元素设置行高和列宽，可是不能给行内元素设置宽度而只能设置高度。

2) 元素的浮动特性。float:left。浮动后，块级元素不在独占一行而是依次排列。

 

3) 绝对定位和相对定位。相对定位是说元素的位置根据上下文的位置的变化而变化。块级元素默认情况下是相对定位relative。绝对定位是指相对于父元素而定位的元素。绝对定位的元素有可能会和其它元素发生重叠。这是需要注意的。需要说明：top，button，left，right都是绝对定位，因为它们都是相对于父元素而言的。

 

Ø 盒子模型

元素中的内容的定位和元素的定位是不同。房子的location和房子中的一张桌子的location是两个不同层次的文字。一大一小，一内一外。margin---外边距，元素和元素之间的间距。

padding---内边距，元素内部的内容和元素边界之间的距离。border元素边界的厚度，好比城墙的厚度。这里涉及到了一个概念上的歧义：我们本意是给一个元素设置高度和宽度，但是实际不是。实际是我们给元素中的内容设置了高度和宽度，真实的高度和宽度还要加上内边距和边框的厚度。事与愿违！解决方法是box-size:border-box;加上内边距和边框厚度之后的盒子尺寸。系统默认是content-box，没有把内边距和边框厚度算进去。这个细节需要注意。

 

Ø 列表的横向排放

横向摆放时需要注意的问题，其中之一就是列表项的绝对大小px屏幕的缩放问题，屏幕缩放时，列表如何存在？最好是采用相对大小%，而且计算好条目之间的间距，尤其是去除最右侧的间距。涉及到伪类选择器li:last-child{margin-right:0}，最后一点就是设置最小宽度min-width，放置屏幕缩放过小时出现文字挤压问题。

 

Ø 阴影效果

text-shadow: x方向上的位移，y方向上的位移，阴影的模糊程度，rgba(颜色和透明度)。

在阴影运用上，注意精细浅淡才唯美。