首页 > 代码库 > CSS随笔

CSS随笔

注:随笔有错误,全屏本人自己开发所写,不推荐借鉴。

 

 

CSS背景操作:
div居中:
background-position:center;div在中间居中
background-position:right bottom;div在右下角
background-position:20px 30px;距离左边20个像素,距离上边30个像素。
background-repeat:no-repeat;背景图片只设置一个,不平铺
写两个具体的值的时候,第一个值代表水平方向,第二个值代表垂直方向。

背景是否滚动:
background-attachment:背景是否滚动 scroll 滚动  fixed 固定 
如果用scroll滚动的话就是以div为参考的,如果设置为fixed的话就是以浏览器为参考的。


背景属性的连写:
因为上面的方法如果写出来的话太复杂了,背景连写比较简单。
background:red url("1.jsp") on-repeat bottom fixed; 这些方法都会生效的,顺序也没有区别的,不平铺,因为设置的是固定,所以在浏览器的下面。 

清除列表前面的图标:list-style:none;
取消超链接的下划线:text-decoration:none;
文本向右边移动些:padding-left:10px;
如果想让一个图标正对着文字的时候,就让他先向左,然后在center居中,就ok了


如果文字在div里面,设置文字居中text-align:center;的话,是以div做参照物的。


盒子模型:

border-top-style: solid/dashed; 实线或者虚线
border-top-color:red;    边框的颜色
border-top-width:5px;上面有5个像素粗的线
也可以简写成:
border:1px solid red;这个就是红色的边框



表单空间案例:

border: 0 none;去掉文本框的边框


内边距:

padding是内边距
padding-top:20px;上面的内边距是20px,其他都类似
margin是外边距

内边距简写:
padding:20px 30px; 上下20px  左右30px
padding:20px; 上右下左的内边距都是20px

padding:20px 30px 40px;上内边距为20px,左右内边距为30px  下内边距为40px

padding:20px 30px 40px 50px;上20px,右30px 下40px 左50px

内边距影响盒子大小:
用padding设置内边距的时候,可以撑大盒子,也就是撑大div,如果向弄成正常的话,就要在定义之后减去撑大的宽度或者长度

如果设置边框的话,也会影响盒子的宽度

盒子的宽度=定义的宽度+边框的宽度+左右内边距


继承盒子的知识点:
子类继承父类,宽度是和父类一样的,但是高度不一样。

继承的盒子一般不会被撑大:
    包含或者嵌套的盒子,如果子盒子没有定义宽度,给子盒子设置左右内边距不会撑大盒子,只要别超过父类的盒子定义的宽高就行。但是定义高度的话就会继续撑大父类的盒子的


外边距:
margin-left:20px;
margin-right:30px;
margin-top:40px;
margin-bottom:50px;

连写:
margin:20px;如果像这样只有一个参数的时候就代表四周围都是20px的。
margin:20px 30px;如果是像这样的,只有两个参数的,第一个是上下,第二个是左右。
如果是四个参数的就是上、右、下、左
如果是三个参数的就是 上、左右、下 



垂直方向外边距合并、外边局塌陷:

垂直方向的两个盒子,如果都设置了垂直方向外边据,取的是设置的比较大的值。


外边局塌陷:
    嵌套的盒子,直接给子盒子设置垂直方向向外边距的时候,会发生外边据塌陷。
解决办法:给父盒子设置边框border。
      给父盒子设置 overflow:hidden      bfc格式化上下文



几个案例:
爱宠知识练习:
清楚和浏览器的间隙:
margin:0;
padding:0;

个人资料案例:


文档流:元素自上而下,自左而右,块元素独占一行,行内元素在一行上显示,碰到父元素的边框换行。



浮动布局:
Float:left||right 一个是向左浮动,还有向右浮动

如果一浮动了,那么二就会占据一的位置,但是不会覆盖一,也就是一飞起来了,二到了一的底下



元素浮动之后不占据原来的位置,也就是脱标了。

如果两个盒子都浮动,那么他们就在同一行显示,块元素在一行显示,

如果想让元素在屏幕右边显示的话,就让他右浮动。

行内元素浮动之后就会转换成行内块元素的,不过最好别用,转行内块最好用display:inline-block;



浮动的作用:
1、文本绕图---把文字设置成浮动就行了,但是文字和图片元素之间是不会覆盖的,没有重叠关系。
2、制作导航
3、网站布局


如果导航中的文字是居中的,那么给他定义两个div,第一个div是导航,第二个div设置文字居中。


当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误:
清除浮动不是不用浮动,而是清楚浮动产生的不利影响。
清除浮动的方法:
clear:left|right|both  开发中最常用的就是clear|both;
1、额外标签法:
在最后一个浮动元素后添加标签。
但是用不上,非常不专业。

2、给浮动的父级元素使用:overflow:hidden;

3、最完美的方法,直接写:
代码看不懂,名字叫做伪元素清除浮动。


css初始化和overflow属性:
为了兼容所有的浏览器,在编写代码的时候需要进行初始化,


overflow介绍:
overflow属性规定当内容溢出元素框时发生的事情 
四个属性:
visible|hidden|scroll|auto
大概的意思就是内容溢出div时,可以显示,也可以设置成不显示
visible:内容不会被修剪,会呈现在元素框之外。
hidden:内容会被修剪,并其余内容是不可见的。
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余内容。
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容,就算内容不出现盒子,也会出现滚动条。



定位:
position:static;静态定位,这个不用写,是默认值。
position:absolute;
1、元素使用之后不占据原来的位置,(脱标了)
2、元素使用之后,位置从浏览器出发的,。
3、嵌套的盒子,父盒子没有使用定位,子盒子绝对定位,位置从浏览器出发。
4、嵌套的盒子,父盒子使用定位,子盒子使用绝对定位,位置从父盒子出发。


调整有素的重叠顺序:
z-index:1;  值越大,就在上面显示。值的默认是0-999。


相对定位:
position:relative;也是四个方向,方向是上下左右。

1、相对定位是相对于自己出发的。
2、移动之后,还占据原来的位置。
3、子绝父相■  用的最多的,但是不知道是什么意思

 

CSS随笔