css-day7-个人学习笔记

css-day7-个人学习笔记

 

一、浮动定位

1、清除浮动——清除当前元素前面的元素浮动所带来的影响

clear：none（默认值，无清除效果）/ left（清除当前元素前面元素左浮动带来的影响）/ right（清除当前元素前面元素右浮动带来的影响）/ both（清除当前元素前面元素任何一种浮动方向所带来的影响）
2、浮动元素为父元素高度带来的影响——父元素的高度是以未浮动的子元素高度为准，如果一个元素中所有的子元素全部都是浮动的，那么该父元素的高度为 0。
解决父元素的高度问题方案：

a、直接设置父元素高度，弊端：必须知道父元素的高度；

b、让父元素也浮动，弊端：对后续元素会产生影响；

c、为父元素增加溢出处理属性（overflow：hidden 或 auto），弊端：要溢出显示的内容，也一同被隐藏；

d、在父元素中，增加空子元素到最后一个位置处,并且设置其clear属性为both，弊端：多一个子元素在页面上。

二、显示

1、显示方式——display：none（让指定的元素不显示并且不占据页面空间）/ block（将指定的元素显示为块级）/ inline（将指定的元素显示为行内）/ inline-block（将指定的元素显示为行内块，多个元素能够在一行内显示）/ table（将指定的元素显示为 table）

2、显示效果

a、visibility属性 ：visible（默认值，元素可见）/ hidden（元素不可见，但是占据页面空间）/ collapse（用在表格元素上，删除一行或一列时，不影响表格整体布局。（display:none） 和 （visibility:hidden） 区别：（display:none）脱离文档流，所以不占据页面空间；（visibility:hidden）只是改变可见性，并不脱离文档流，空间依然占据。

b、opacity 属性：改变元素的透明度，取值为从0.0(完全透明) ~ 1.0(完全不透明) 之间的数字。

c、vertical-align 属性：在 td 中，设置文本的垂直对齐方式 / 设置行内块元素两边文本的垂直对齐方式 / 设置图片两端文本垂直对齐方式。vertical-align：top / middle / bottom / baseline（基线对齐）

3、光标——改变鼠标在页面(元素)中的状态，cursor：default（默认）/ pointer（小手）/ crosshair（+）/ text （文本状态 I）/ wait（等待）/ help（帮助）

 
三、列表

1、列表项标识——list-style-type：none （去点）/ disc （实心圆）

2、列表项图像——list-style-image：url()

3、列表项标识位置——list-style-position：outside（默认值）/ inside（将列表项标识的位置改为内容区域之内）

4、列表属性——list-style：type url position；常用方式：list-style：none。

 

四、定位(相对，绝对，固定)

1、定位属性

a、定位属性——position：static（静态的，默认值）/ relative（相对的）/ absolute（绝对的）/ fixed（固定定位）。注意：relative，absolute，fixed被称之为 "已定位元素"

b、偏移属性——改变元素在页面中的位置，top / bottom / left / right：px(偏移距离)

c、堆叠顺序——在已定位元素中调整堆叠顺序，z-index：无单位的数字

2、定位 - 相对定位——元素会相对于它原来的位置偏移某个距离，元素原来所占的空间会被保留。position：relative；配合 top / right / bottom / left 偏移属性实现位置的微调

3、定位 - 绝对定位——绝对定位的元素会脱离文档流即不占据页面空间，会相对于离它最近的已定位的祖先元素去实现定位，如果没有已定位的祖先元素，那么就会相对于最初的包含块去实现定位比如body或html。position：absolute；配合着 top / right / bottom / left 实现位置定位。特点：绝对定位元素会变成块级元素，绝对定位元素的margin可以使用，默认情况下，auto会失效

4、堆叠顺序——z-index：无单位的数值（数值越大，越靠前，默认是0，可以取负值，当前元素在页面所有内容之下）

注意：只有已定位元素才能设置z-index；默认的堆叠顺序是 后来者居上；父子元素中，永远都是子压在父上,是不受z-index影响的。

 

五、弹性布局Flex

1、采用Flex布局的元素，称为Flex容器，他的所有子元素自动成为容器成员，称为Flex项目。

.box{/*把容器设置为Flex布局*/
    display:flex;
    display:-webkit-flex;/*Safari*/
}

2、容器属性：flex-direction（排列方向）、flex-wrap（如何换行）、justify-content（主轴上对齐方式）、align-items（交叉轴上对齐方式），这些属性设置在容器上。

.box{/*flex-direction属性决定主轴的方向*/
    flex-direction:row | row-reverse | column | column-reverse;
}

.box{/*flex-wrap属性定义换行方式*/
    flex-wrap:nowrap | wrap | wrap-reverse;
}

.box{/*justify-content属性定义主轴对齐方式*/
   justify-content:flex-start | flex-end | center | space-between | space-around; 
}

.box{/*align-items属性定义交叉轴上对齐方式*/
    align-items:flex-start | flex-end | center | baseline | stretch;
}

3、项目属性：order（项目排列顺序）、flex-grow（放大比例），这些属性设置在项目上。

.item{/*order定义项目排列顺序，数值越小，排列越靠前*/
    order:<integer>
}

.item{/*flex-grow定义项目放大比列*/
    flex-grow:<number>
}

参考文章：Flex布局语法教程

 

六、媒体查询

1、常用设备类型和宽度：超小屏幕 手机（<768px）、小屏幕 平板（>=768px）、中等屏幕 桌面显示器（>=992px）、大屏幕 大桌面显示器（>=1200px）

2、如何使用：

@media 媒体类型 and （属性设置）{/*根据不同分辨率做不同的页面css设置，screen为电脑屏幕、平板电脑和智能手机等*/
    //定义样式
}
例：
@media screen and (min-width:768px) and (max-width:992px){
    body{background-color:#f5f5f5;}
}

也可以通过调用相应的样式文件

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css"/>

3、头部mate

一般情况下会设置头部meta，如

<meta name="viewport" content="width-device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

width=device-width:宽度等于当前设备的宽度
initial-scale:初始的缩放比列（默认设置为1.0）
minimum-scale:允许用户缩放到的最少比例（默认设置为1.0）
maximum-scale:允许用户缩放到的最大比例（默认设置为1.0）
user-scalable:用户是否可以手动缩放（默认设置为no）