web初学 CSS(层叠样式表)二

最新推荐文章于 2024-09-02 14:07:37 发布

自学AI的鲨鱼儿

最新推荐文章于 2024-09-02 14:07:37 发布

阅读量299

点赞数

分类专栏： # 学习简单的web 文章标签： web

本文链接：https://blog.csdn.net/qq_16555103/article/details/85138499

版权

学习简单的web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

八、CSS盒子模型：

0、基本常识：

0.1 盒子模型的简介：

0.2 盒子标签不仅仅只有div 与 span ，p 和 h1 标签等也是当做盒子处理

0.3 盒子对属性定义时是整个盒子生效的，它可以用CSS将行级元素居中：

0.4 清空 margin padding border 格式遇到的问题：

(1) 格式化代码：

*{
    margin:0px;padding:0px;border:0px;
 }   /*-------  所有内容 格式化。*/

(2) 格式化带来的问题：body标签格式化后没有 margin border ，body 内部的 div margin 时会带动全部的body 标签向下移动 -- 解决方法：

方法一：设置上边框的大小 -------------------

方法二：加上overflow 属性 -------------------

0.5 行级元素与块级元素及相互转化：

（1）块元素：居中调整位置用 margin padding

（2）行内元素：居中调整位置用 text-align 、line-hight 或者将其转化为块元素用 margin padding 操作

注意：并非所有的行内元素不可设置高度，例如：img标签

(3)行内块元素: 调整位置用 margin padding

① 用 display 和 float （无序列表ul转化为行内块模式）转化为行内块元素。

② 常见的行内块元素：

input ---- 它是典型的行内块元素.

例：无序列表 ul 行内块转化：用float:left 或 display:inline-block

（4）行内块元素与块元素的相互转化：display 属性

span{display:inline;}   ------------   将元素转化为 行内元素
span{display:inline-block;}   ----------- 将元素转化为 行内块元素（不过要用vertical-align 定义垂直对齐方式）
.span{display:none;} -----------  将元素 隐藏 并删除其占用空间
.span{visibility:hidden;}  -----------  将元素 隐藏 不删除其占用空间

span{display:block;} ------------ 将元素 转化为 块级元素

1、div盒子模型（块级盒子 ------自动换行）：

（1）CSS 边框border属性：

用法实例：

（2） CSS 内边距 padding：

div.a{padding:10px 20px;}   ------- 当只写 两个参数时， 前面 --- 上下 ； 后面 --- 左右。
错误实例：div.a{padding:10px auto;}   -------  padding不能用 auto

（3）CSS外间距 margin：

margin 与 auto 使用具有居中的效果 ,注意 auto 写在上下是默认为 0

div.a{margin:10px 20px;}   ------- 当只写 两个参数时， 前面 --- 上下 ； 后面 --- 左右。
div.a{margin:10px auto;}   -------   上下 10px 左右 自动 居中，即 auto 左右 默认为 居中。
div.a{margin:5px auto 5px 200px} 

div.a{margin:auto 10px;}   ------- 上下 0px  左右 10px ，即 auto 上下 默认为 0px。

（4）设置背景 background：

① 设置背景颜色：

none 可以清空背景颜色:

②设置背景图片：

.top1{width:200px;height: 200px;
    background-image: url("./images/bg_flower.gif"),url("./images/bg_flower_2.gif");     
    /* 同时设置多张背景图片，中间用  ， 隔开*/
}

③设置是否填充：

④ 设置图片位置：

⑤ 设置页面图像位置固定：

⑥ 设置导入背景图像大小：

背景大小可以用 auto:

⑦ 综合显示：

（5）透明度 opacity ：

（6）控制标签类型（行元素、块元素、行内块元素）：display 属性

2、行内块盒子模型：

方法一： 1、 display:inline-block 2、vertical-algin：middle --------- 设置行内块的垂直对齐方式（只有 inline-block ，vertical-align属性才会起作用。）
方法二： float：left / right ------------------ 脱离文档流
方法三: position:absolute ------------------ 脱离文档流

（1）常见的问题：

① 格式化行内块生成时的间距：

（2）案例：

注意 : 同一个盒子只能做一个背景图片，后续的背景图会覆盖前面的背景图（无论是否填充），因此，想要在一个盒子中加入多个背景图片需要在该盒子内部加入子盒子

九、无序列表ul 和有序列表 ol ：

列表的理解：块级盒子的集合（小型的body 标签） ------- 内部元素都是块级元素

1、无序列表：

（1） ul 基本常识

外观：

特点：自带 padding ，使用时通常清除 padding 。他可以多层嵌套：

（2）ul 标签自身的属性：

① type 属性：

-------- html文件 ，这是标签内部属性 ，并非css 属性-----------
<ul type="none">
    <li>无序列表，前面没有标记</li>
</ul>

(3) CSS中更改 type

---------------------------  CSS 文件-----------
ul{list-type:none;}

2、有序列表 ol ：

（1）基本常识：

代码与 ul 类似，只是结果可以排序。

（2）ol 标签本身的属性：

属性：

实例：

十、html5/css3新标签:

https://blog.csdn.net/qq_16555103/article/details/85260716

十一、表单：form、input、select、textarea

html5新增的表单标签： https://blog.csdn.net/qq_16555103/article/details/85260716

form / input ( 非按钮标签,即需要提交内容) /textarea / select -------------- 必须有 name属性 , value 属性不必要

input (按钮标签) ----------- value 属性尽量有,name属性不必要

1、创建表单：form ------ 表单整体提交

提交地址 ① # --------- 表示提交到当前页面 ② "文件路径 " ------------------- 提交跳转到指定路径

提交方式 ① get 方式 , 暴露信息 ② post方式不暴露信息

<form action="#" method="get" name="table1"></form>   -------- 创建表单,他是一个块级元素

2、表单输入控件：input 标签

特点：它是行内块元素，可以设置 width 、height

（1）input 属性：type 、name 、value ................

① type ：指定控件的类型

② name：指定空间的名字。

③ value ：默认提交值，占用空间

④ placeholder：提示信息，不占用空间（注意与 value的区别）

常见问题：

1）自身属性 checked=“checked” -------- 设置默认选项

<input type="radio" name="a1" value="提交的值1">展示给用户的值1</input>
<input type="radio" name="a1" checked="checked" value="提交的值2">展示给用户的值2</input>   --- 设置默认选项

2）在用复选框时，为了防止提交时多个相同name 覆盖，习惯在 name 属性后加 [ ]

4）普通按钮的两种形式：

5）图像提交：

2、文本域 textarea：

特点：它是一个块级元素

禁止textarea 可以缩放 ------------> css 样式代码中添加： resize：none；

<textarea name="必写" clos="显示列数" rows="显示行数"></textarea>    ----------- clos、rows 可以用css样式代替。

3、下拉菜单：select

特点：它是一个行内块元素

（1）基本用法：

（2）自身的属性：

十二、浮动与定位：

浮动的理解：
浮动相当于分层，将浮动的元素从文档流中取出，后面非浮动元素填补浮动元素原来的位置（盒子模型会覆盖,文本不会覆盖）

1、浮动：

（1）浮动的方法：

浮动后可以在 css 中用 z-index：整数来设置浮动元素的层数。

（2）清除浮动的方法：

① clear 清除：

常常用于同级浮动清除，以高度最高的基线为准。

② 利用父级盒子的属性： overflow：hidden；

③ 添加伪元素的方法

2、overflow 的用法：

3、定位属性：position

1、常见的定位模式：

2、相对定位：relative -------------------------- 在原文档流进行操作,占用原文档流的位置

概念：相对于自身的四个边进行定位。

.small_div{width:100px;height: 100px;background: yellow;
    position: relative;       /* -------------  相对定位  */
    left:100px;
    top:80px;
}

3、绝对定位：obsolute：------------------- 本质：脱离原文档流进行操作,不占用原文档流的位置(z-index设置浮动层数)

特点：

① 基于第一个拥有 position: relative; 属性的父类的四边为基准，默认是 body。

② 元素会脱离原来的文档流（相当于浮动），其他元素会填补原来的空间（可以用clear清除浮动）

.small_div{
			width:100px;
			height: 100px;
			background: black;
			/* 设置过绝对定位后,文档会脱离原来的文档流 默认是以body作为定位依据,如果该div任意上级有定位属性,那么会以他为基础定位 */
			position:absolute;        
			bottom:0px;
			right:0px;
			z-index:1; /* 设置  浮动  层级 数值越大,越靠前 */
}

4、固定定位：-------------------- 本质：浮动

.ad{
			width:100px;
			height: 100px;
			background: red;
			position:fixed;           /*-------------- 固定定位 */
			/*  水平垂直居中 */
			top:0;
			left:0;
			right:0;
			bottom: 0;
			margin:auto auto;
		}