DAY_04 HTML小白学习笔记

来源：互联网发布：淘宝店虎扑识货认证编辑：程序博客网时间：2024/06/06 11:50

一、浮动(块级元素的浮动)

float漂浮：

#d1{

float:left;//向左漂浮right;//向右漂浮

}
#d2{

float:left;//实现并排，随d1移动

}
/* <div>的上一个或下一个块的浮动会对其产生影响。(使父div属性失效) */

清楚周围浮动的影响：

#d3{

clear:left;//左 right;//右 both;//左右均清除

}

二、盒子模型

块元素：1.边框 2.里面元素 3.外面元素
1.边框

border-top:上边框
border-right:右边框
border-left:左边框
border-bottom:下边框
2.内间距

padding-top:向上撑开
padding-right:向右撑开
padding-left:向左撑开
padding-bottom:向下撑开

<div></div>中使用：
padding:10px;//向上、左撑开10px的边距
padding:10px 20px;//分别向上、向左撑开10px、20px的边距
padding:10px 10px 10px;//向上、向左右、向下撑开10px的边距
padding:10px 10px 10px 10px;//向上、向右、向下、向左撑开10px的边距
3.外边距(块与块之间)

margin：(同padding)

三、CSS伪类

p:first-child{ //p中第一个子类 :enable{//所有可用的元素(未被禁用的)

} }

input:enable{ //input中可用元素 :disabled{//所有被禁用的元素(eg:按钮、文本框被禁用，不可点击)

} }
禁用 disabled="disabled";eg:<input type="button" value="按钮" disabled="disabled"/>

type="button"//按钮type="text"//文本框

:checked{//被选中的标签:foucus{//获取焦点的标签

}}

:read-write{//可读可写(正常状态):read-only{//只读标签(看起来和可输入标签一样)

} }

四、CSS3新增伪类

p:nth-child(4){//p元素是其父元素的第四个元素p:nth-last-child(2){//p元素是父元素的倒数第二个标签

}}

p:nth-of-type(2){//父元素的第二个元素p:nth-last-of-type(2){//父元素的倒数第二个标签

} }

p:first-child//是其父标签的第一个标签，且为p标签

p:last-child//是其父标签的最后一个标签，且为p标签

p:first-of-type//父标签的第一个p标签

p:last-of-type//父标签的最后一个p标签

五、伪元素::(起到元素的作用)

p::before{

content:" "; //在p标签前增加显示出来，不是真正的内容，无法被选中

}
::after //在...标签后显示出来
::first-letter //第一个字母(汉字为第一个字)
::first-line //第一行
::selection{ //选中时颜色及其背景颜色

color: ;
background: ;

}

六、CSS定位

1.绝对定位：脱离了文档流(方位不会受其他的影响)
2.相对定位
3.默认定位：static
4.固定定位：fixed
1.绝对定位position:absolute;(相对于浏览器)

①绝对定位脱离了文档流，不会单独占满一行(不能设置浮动[可产生重叠])
仅受自身的top,left,right,bottom的影响。

②一个块的父元素做了定位，top,left,right,bottom是相对于最近的一个父元素的；
父元素没有定位，就相对于body(网页)。
③内容不会随浏览器窗口大小的变化而变化(一般配合js来使用)。

eg: #d2{

position:absolute;
top:150px;
left:150px;

}

2.相对定位position:relative;(相对于自己默认位置)

①相对定位没有脱离文档流，它会单独占满一行(可设置浮动)
它的方位只会受top,left,right,bottom的影响。

②相对定位top,left,right,bottom的是相对于块的最近的一个父元素。

(赋值可正可负，相对于原来(0px,0px)的位置变化)

3.默认定位position:static;

①top,left,right,bottom只有设置了绝对、相对、固定时才有用。对默认定位均无效。

4.固定定位position:fixed;(导航菜单)

①固定定位脱离了文档流，不会单独占满一行(不可设置浮动)

②固定定位top,left,right,bottom始终相对于的是body。(网页显示窗口，拖动滚动条，其位置不会发生改变)
/* IE不好用时，加<!DOCTYPE html>强制IE按照标准格式去做 */

*补充：

文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(按照自己的理解就是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)。

0 0