html+css基础

最新推荐文章于 2024-05-03 02:10:24 发布

weixin_54005667

最新推荐文章于 2024-05-03 02:10:24 发布

阅读量1k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_54005667/article/details/112330636

版权

1.常见浏览器

常见的五大浏览器有 ie 火狐谷歌 safari 和opera等

ie：是Trident内核。

Firefox（火狐)：Gecko内核，代码完全公开，开发程度高。

safari：WebKit内核。

chrome(谷歌)：Blink内核，blink其实是webkit的分支，大部分国产浏览器最新版用blink内核。

opera:用的也是blink内核

移动端就Android手机而言，使用率最高的就是WebKit内核。

2.网页的组成

结构：HTML

表现：css

行为: JavaScript

三者分离

3.快捷键

注释快捷键ctrl+/

多行注释ctrl+shift+/

复制当前行 ctrl+d

向前缩进 shift+tab 可以选中多行，然后直接全部缩进。

4.网页结构

<!DOCTYPE html>  版本声明
doctype: document(文档) type（类型）

<html lang="en"> html的属性lang
lang代表语言 en是英文的意思

mata标签控制网页的元信息，根据属性不同作用很多。
charset：字符编码  文档的编码、编辑器的编码、浏览器的编码都相同，才可以正确打开网页（字体乱码的时候参照）

name="keywords" content=""  关键词
name="description" content="" 描述

单标签就是空元素。

5.基本行块元素以及特性

块级显示模式:自己单独占一行,设置宽高起作用,在不设置宽度的情况下,和父元素的宽度一样
不设置高度靠内容撑开
块元素: div h1-h6 ul ol li dl dt dd hr p form

行内(内联)显示模式: 一行可以有多个,设置宽高不起作用,宽高靠内容撑开
行内元素: span a b strong i em u ins s del 

行内块显示模式: 一行可以有多个,设置宽高起作用
行内块元素: img 表单元素（button input）

P标签不能包含任何块元素，a标签可以包含任意块元素。

6.常用标签

		<b>加粗</b><strong>加粗</strong>  强调一段话
		<i>倾斜</i><em>倾斜</em>  强调关键词
		<u>下划线</u><ins>下划线</ins>
		<s>删除标签</s><del>删除</del>
		<var></var>  主要包含变量 类似X Y的变量

后面是语义化标签

a标签：

行标签

href属性：书写跳转路径。

target属性：控制跳转方式，其中值_self默认本页面不跳转 _blank代表新标签页跳转。

title属性：鼠标放上去有对链接的解释。

在href中写JavaScript：；表示链接失效。

href的值为一个#的时候，是回到顶部。

如果a标签的href属性书写的链接可以使用浏览器打开（比如图片），则浏览器跳转到这个位置并打开

如果a标签的href属性书写的链接不可以使用浏览器打开，则浏览器直接下载。

a 标签的download属性，书写下载内容

<a href="##"  download="地址"> </a>
<a href="../note/9.10_html02.pptx">点击下载图片</a>

a 标签打电话

<a href="tel:15701665563">给李沛华打电话</a>
<a href="sms:15701665563">给李沛华发短信</a>
<a href="mailto:lipeihua@atguigu.com">给李沛华发邮件</a>

img标签：属于替换标签

图片格式:

png:透明图

JPG:普通图

src属性：图片的路径主要网络路径和相对路径。

alt属性：图片加载失败无法显示时显示的替代文字。

title属性：当鼠标悬浮在图片上时显示的文字。

7.锚点链接

任何标签都有的属性id，id唯一不重复

id="叫什么名字" a href="#叫什么名字"

8.表单元素

1.form元素

为元素创建表单，可以提交form中的数据。

2.action属性

表单提交的地址

3.method属性

表单提交的方式数据传输的方式

常见的两种方式是get（从服务器上获取数据）和post（向服务器传送数据）。

数据查询建议GET方式；数据的添加和修改则用post。

4.表单的提交

提交按钮

type属性值规定当前button标签的功能

button 纯按钮

submit 提交按钮默认也是submit

reset 重置按钮，重置所在from中所有内容恢复默认

双标签 <button type="submit">提交</button>  
单标签 <input type="submit" value="提交">  value控制按钮的内容

两个按钮区别：

button双标签，里面可以放置img等标签。

input是单标签，只能控制自己的形态。

5.input单标签

type属性:控制当前input标签的形态和功能

text:文本域（单行文本输入框，常用在输入用户名）

name属性:当前表单元素的键名键名自定义

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HxzlQMD8-1610017701439)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20200613121930881.png)]

password:密码域

<input type="password" name="" value="">

radio:单选框

<label for="man">男:</label>
<input type="radio" name="gender" id="man" value="男">
<label>女:</label>
<input type="radio" name="gender" checked="" value="女">

id关联label，使其点击男可以触发控件
单选框name要相同
checked=""  checked 两种写法都可以，表示默认选中的状态

checkbox：多选框

您的爱好是:
		抽烟 <input type="checkbox" name="" value="抽烟">
		喝酒 <input type="checkbox" name="" value="">
		烫头 <input type="checkbox" name="" value="" checked>

file：文件域（用于上传文件）

请上传你的头像
<input type="file" name="">

hidden：隐藏域(一些信息需要被表单提交，但不需要用户的任何操作可用)

<input type="hidden" name="" value="">

textarea：多行文本域。可用css宽高设置大小

请介绍一下你自己:
<textarea name="" cols="" rows="">
			 
 </textarea>

select：下拉框

option：下拉项

selected默认选中

您的国籍是:
			 	<select name="">
			 		<option>中国</option>
			 		<option selected="selected">韩国</option>
			 		<option>日本</option>
			 		<option>越南</option>
			 	</select>

下拉组

			<select name="">
			 		<optgroup label="亚洲">
			 			<option value="中国">中国</option>
			 			<option>韩国</option>
			 			<option>日本</option>
			 			<option>越南</option>
			 		</optgroup>
			 		<optgroup label="欧洲">
			 			<option>法国</option>
			 			<option selected>德国</option>
			 			<option>意大利</option>
			 			<option>英格兰</option>
			 		</optgroup>
			 </select>
  option中的是用来显示看的，value中的中国是用来提交的

6.label

1.label for关联id值

2.label直接包含注释内容和对应的表单元素，一定把label标签的for属性删除

一个表单元素对应一个label

<label>
	请输入密码：
	<input type="password" name="" value="">
</label>

8.表格元素（块）

表格最外层是table元素
表格的标题是caption元素
tr是行
th是表头单元格默认居中和加粗
td是普通单元格
table标签设置border-collapse：collapse；合并边框。也可以写cellspacing=0(其实是两边框合并了变为2px)
colspan:表格跨列，谁要给谁设置
rowspan: 表格跨行，谁要给谁设置
thead:头部
tbody:内容
tfoot：底部
三个元素无关书写顺序

9.iframe元素

内联框架元素，可以将另一个页面嵌套在你的页面里面

  <iframe src="http://www.baidu.com" width="300"></iframe>
   <iframe src="./01.html" width="300"></iframe>

css相关(层叠样式表或级联样式表)

样式三种书写方式

1.内联式（行内式）

臃肿冗余代码多;结构样式没有完全分离不便于维护；

样式来源：（看浏览器审查）

user agent stylesheet 一般是元素默认样式。

inherited from XXX 一般是继承样式。

element.style 则是行内书写样式的引入

2.头部引入（嵌入式）

方便维护和修改；样式与结构相分离；代码量少。相对整个网站来说有冗余代码，相对单页没有（比如网站多个页面的头部尾部相同时）

3.外链式（外部引入）

有服务器压力因为需要请求服务器；相对整个网站没有冗余代码，相对单页有

一个公共CSS可以供多个HTML使用

4.@import引入css的方法

@import""

@import url(" ")

引起不必要的重绘重排

功能范围不同 link属于html标签 @import只是css提供的引入css的功能
加载顺序不同 页面在加载的时候，link引入的css会同时被加载 @import引入的css只有等页面全部下载完成以后才进行加载，所以可能会出现闪烁
兼容性 link所有浏览器都支持 @import低版本ie不支持
使用JS控制样式 JS只能控制link标签 @import是不能够被JS控制的

选择器

1.id选择器

唯一不重复

id=“xxx” #xxx{}

2.类选择器可以重复且可以有多个类名

class=“xxx xxx” .xxx{}

3.！important只控制一条样式规则，而不是控制整个选择器。

4.样式优先级（不同样式都能实现，相同样式才需要比权重优先级，权重一样看书写的先后顺序）

!important > 行内书写 > id > 类 > 标签名 > 通配符 > 继承
!important > 行内书写 > id > 类 > 标签名 > 通配符 > 默认

5.相邻兄弟选择器

相邻兄弟选择器使用 + 间隔开（A+B：在A元素的下边紧贴着A的元素并且是B 才能被选中）

 .outer>.show+span{
            background-color: yellow;
            
  <div class="outer">
        <p>p1</p>
        <p class="show">p2</p>
        <span>span1</span>
        <p>p3</p>
        <span>span2</span>
    </div>

6.通用兄弟选择器

相邻兄弟选择器使用 ~ 间隔开（A~B：在A元素的下边兄弟元素并且是B 就能被选中）

 <style>
        .outer>.show~span{
            background-color: yellow;
        }
 </style>
 
 
 <div class="outer">
        <span>span0</span>
        <p>p1</p>
        <p class="show">p2</p>
        <span>span1</span>
        <p>p3</p>
        <span>span2</span>
 </div>

7.后代元素选择器

后代选择器使用空格间隔开（A B：在A元素中寻找后代（不一定是儿子）是B的元素）

		.show{}
        .box .show{}
        .outer .show{}
        html body div .show{}

8.子元素选择器

子代选择器使用 > 间隔开（A>B：在A元素中寻找儿子辈元素是B的元素）

div>p

9.群组选择器（并集选择器）

将多个选择器使用 ， 隔开可以同时对多个选择器设置样式
如果多个元素有相同的样式，方法有两种
- 使用一个共同的类名
- 使用群组选择器

.con1,.con2,.con3,.con4{
            width: 100px;
            height: 100px;
        }

10.派生选择器（交集选择器）

一般是一个标签名外加一个类名连着写

span.p1{}
<span class="p1"></span>

11.选择器优先级及其权重计算

行内书写：1000
id选择器：100
class类选择器：10
元素选择器：1
继承：0
只是提供参考，不建议真运算，低级选择器再多也干不过高级选择器。

文本颜色的设置（color）

1.颜色英文名 red yellow blue 等不常用

2.rgb 三原色每一个值都在0-255之间

rgba a是设置透明度值在0-1之间，0是完全透明 1是完全不透明。

3.16进制颜色

4.HSL颜色(hsla a也是透明度)

H：0-360

S:饱和度 0-100%

L:亮度 0-100%

5.透明颜色：transparent

字体的设置（font）

1.font-family 设置字体（可以继承）

font-family:“宋体”，“华文彩云”；控制字体

外部引入字体包：（jier 是自定义的字体名称）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TfLpjO7b-1610017701442)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20200616162752398.png)]

2.font-size字号大小（可以继承）

em 单位参考父级的字号大小前边的数字是倍数。

rem 单位参考的是根元素的字号大小（谷歌浏览器默认字号16px）,不参考父元素的字号。

浏览器都有自己支持的最小字号大小，谷歌最小12px ,字号设置为0时字消失。

3.font-style字体风格（可以继承）

normal：正常

多数元素的默认值

对于默认倾斜或斜体的元素 i var em 可以调整成正常非倾斜样式
italic 让元素呈现斜体一般指的是一个字体

而italic只是选择让使用斜体显示
oblique 让常规字体进行倾斜（强行让当前文字变倾斜）

oblique 后可以跟一个旋转角度以deg为单位

谷歌只支持0deg

火狐只支持汉字和-90 -90度的设置

4.fonnt-weight:(继承)

bold:加粗

lighter：相对父级来说的，比父级要细一个级别

bolder:相对父级来说的，比父级要粗一个级别

normal：正常粗细可以将默认加粗的字体进行改变为正常比如 b strong

数字法：

100-300 是细

400-500 正常

600-900 加粗

5.font复合属性

font-style font-weight font-size/line-height font-famliy

font:italic bold 40px "Microsoft YaHei";

不写行高的话默认写normal 会导致覆盖掉继承的行高，所以可以在font里写行高或是在复合属性下面写单属性行高覆盖它。

必须要写font-size 和 font-famliy 其他的选写。

行高 line-height（继承）

行高:是一个line-height,是用来调整文本在元素中垂直方向的位置,（父元素）
当元素不设置固定高度时,高度会随着行高的变化而变化,高度的值就是行高的值.（高度就是行高的值，也算靠内容撑开的。）
当元素设置固定高度时,文本会随着行高的变化在垂直方向移动,但是不会改变盒子的高度.
最终反推的文本垂直居中的公式: 当希望一个文本垂直居中于一个固定高度的盒子,行高值等于盒子的高度值。

行间距=行高-字体大小

vertical-align:

默认情况下，在一个行框中，所有内容都是基线对齐
但是图片没有基线，所以就把图片的底部当成了基线对了
vertical-align 可以设置让一个元素以自身的哪一个位置对齐
值：
- baseline 基线对齐
- top 让元素顶部与整行的顶部对齐
- bottom 让元素底部与整行的底部对齐
- middle 让元素的中间在行框的x-height中间对齐

图片在父元素垂直居中

1首先让父级的行高和高度一样
2因为图片的基线是底部，平分以后不会居中，所以图片改变为自身的中间对齐方式对齐为 vertical-align: middle;

去除图片的默认间隙（幽灵间隙）

1.display：block; 图片转为块元素
2.给图片设置verticle-align不为baseline 比如 top bottom middle都可以
3.font-size：0；直接让字号大小变成0 文字就没有大小了也就是幽灵空白节点文字大小变成0了也不会撑开间隙了,主要针对于没有文字的行框。
4.改变文字的高度文字的高度可以由line-height来控制让line-height：0 也可以解决问题
5.给图片设置浮动

text-decoration ：文本修饰（不继承）

none：取消下划线
underline:下划线
overline:上划线
line-through：删除线

text-decoration其实是一个简写的属性。

text-decoration-line：上划线下划线删除线
text-decoration-color：颜色
text-decoration-style：实线solid 虚线dashed 点线dotted 波浪线wavy

text-indent 首行文本缩进

text-indent：2em

如果自己有font-size的话，em直接参照自身的字号大小，不参考父元素字号大小

em 可以是负值（可以用来设置网站logo里的文字隐藏）

只针对块级元素生效

text-align:(继承)

并不是控制元素自己的对齐，只是控制它里边的行内容水平方向对齐

只能控制行内元素和行内块元素

left：默认左对齐
center：居中
right：右对齐
justify 两端对齐

字符和词间距：

在html中，英文数字的组合只要没有空格都会被当做是一个单词

在汉字中，虽然不会把多个汉字连在一起当做是一个单词

但是仍然词间距的时候，只改变空格隔开的间距
letter-spacing:控制字符间距
word-spacing:控制词间距

：单位为px

background(背景类设置) 复合属性

background-color背景颜色一般从边框里面开始（如果边框是实线的话一般会盖住看不见，其实是在边框下面）

background-image：url() 背景图不占位置，平铺的话背景图默认会延伸到边框区域里；不平铺的话，图片从（上左）边框下的内部开始（padding里也算内部），如果图片比DIV大的话会默认延伸到下右边框里（被边框盖住了）。

background-position：背景图的定位 x轴方向位置 y轴方向位置

水平(x):left(默认值)/center/right,数值: 正直向右,负值向左
垂直(y):top(默认值)/center/bottom,数值: 正直向下,负值向上

还可以写百分比 px数值

还可以单独控制水平垂直方向：

background-position-x

background-position-y

background-repeat：平铺方式

repeat-x 水平平铺
repeat-y 垂直平铺
repeat 水平垂直平铺(默认值)
no-repeat 不平铺

background是复合属性，可以合写，但是注意默认覆盖，一般单属性写在复合属性下面。

overflow属性（内容溢出设置）

visible：默认，内容不会被修剪，而是显示在元素的框外
hidden:超出内容被修剪，修剪掉的内容不可见，并且没有滚动条
scroll：超出内容被修剪，浏览器显示滚动条方便查看被修剪的内容
auto：浏览器定夺，如果内容超出就生成滚动掉，否则不生成

overflow：auto和scroll的区别：

auto:是自动生成滚动条，不超出不生成超出才生成
scroll：无论是否超出都会生成滚动条
只控制x和y的超出情况

overflow-x：

overflow-y：

溢出修剪都是从元素内部开始修剪从padding下面开始剪切，边框属于外部了。

1.给父元素设置overflow：hidden；父子元素垂直外边距不会塌陷

2.给元素设置overflow：hidden；则元素不会被浮动元素覆盖，在浮动元素下面的话会自己排到浮动元素右边。

3.给父元素设置overflow：hidden；可以包含浮动子元素（解决未设高度浮动子元素带来的高度塌陷）

开启BFC 的方法(块级格式化上下文)

1.设置overflow的值不为visible (hidden 适合)

2.display：inline-block

3.浮动（以浮制浮）

4.设绝对定位（absolute fixed）

5.根元素HTML构成一个bfc

bfc的范围：

直译过来就是, BFC包含创建它的元素的所有子元素, 但不包括创建了新BFC的子元素的内部元素
简单来说，子元素如果又创建了一个新的 BFC，那么它里面的内容就不属于上一个 BFC 了，这体现了 BFC 隔离的思想
也就是所说，一个元素不能同时存在于两个 BFC 中。

bfc的应用：

自适应多栏布局

中间栏创建 BFC，左右栏宽度固定后浮动。由于盒子的 margin box 的左边和包含块 border box 的左边相接触，同时浮动盒的区域不会和 BFC 重叠，所以中间栏的宽度会自适应（左右浮动中间BFC不会被浮动覆盖然后宽度自适应）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yht5g3wu-1610017701446)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20200623121847445.png)]

IFC的规则：

在一个行内格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始
这些盒之间的水平margin，border和padding都有效
盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐

display属性：

block：转换成块元素
inline-block：转换成行内块元素（如果想要DIV并排显示的话，可以设置inline-block 但是并排显示的DIV均要设置）
none:隐藏，直接消失并不占用空间位置，并且带着所有子元素一起消失。
让隐藏的元素显示，只需要修改display的属性不为none即可

visibility属性：

控制元素显示或者隐藏

hidden:控制元素隐藏
- 保留原来的位置，其他元素的布局没有发生改变（占位隐藏）
- 相当于此元素变透明
- visibility属性是继承的，里边的子元素也全部都继承属性，并且隐藏了
- 如果给子元素设置visible覆盖，那么子元素可以进行显示
visible（默认值显示）：让visibility：hidden隐藏的元素显示

display和visibility隐藏的区别：

visibility可以继承，子元素是因为继承了才隐藏
- 可以覆盖继承，子元素即可显示
- display不能被继承，而是直接带着所有内部元素直接隐藏
visibility隐藏，原来空间仍然保留,display隐藏，原来空间消失被占用
js可以获取到visibility隐藏元素的可视化宽高, js不可以获取到display隐藏元素的可视化宽高

opacity:不透明度

控制元素不透明度值是1-0
1是完全不透明
0是完全透明
可以由小数点
opacity直接控制所有的内部元素的不透明度，无论是什么元素都会改变
hsla和rgba设置的透明度只是一种颜色而已，当某些属性设置这个透明颜色的时候才会生效

opacity和rgba和hsla透明的区别：

rgba和hsla只是一个颜色，是属性的取值，比如color background-color，所以只是对颜色的一个处理（rgba给元素背景设置透明，元素内的字不会透明，而opacity则是连字都会透明）
opacity是一个属性，透明是直接设置给元素的，并不会对元素的某部分进行控制

盒子模型的概念

在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间
盒模型由内容（content）+内边距（padding）+边框（border）+外边距（margin）4部分构成
- 内容区域：你书写的内容或者子元素能够显示的区域（设置的宽高都是给内容区设置的）
- 内边距：撑开内容与边框的距离
- 边框：元素的边框
- 外边距：撑开元素和其他元素之间的距离

边框属于盒子外部，padding属于盒子内部

margin:

分4个方向
- margin-left、margin-right、margin-top、margin-bottom
- 每个方向的值都可以单独的设置
- margin-left、margin-top是让自身元素靠右靠下移动
- margin-bottom、margin-right是让其他元素靠下靠右移动
margin的简写：
- margin后跟4个值：分别代表上右下左
- margin后跟3个值：分别代表上左右下
- margin后跟2个值：分别代表上下左右
- margin后跟1个值：分别代表上下左右

关于宽度的理解

块元素不设置宽度，宽度默认是父元素的宽度，水平设置padding的话盒子不变大自适应计算（压缩内容区）边框也一样。
加外边距也会自动计算（会把盒子压缩），整体大小不变
整体大小=外边距（不可见但会占地）+边框+内边距+计算后的宽度（被压缩的内容区）

子元素设置的垂直外边距会传递给父元素

垂直外边距重叠的话取最大外边距

margin父级塌陷解决：1.给父级开启BFC overflow:hidden;

2.给父元素设置border或者padding，然后再减去。

3.子元素设置浮动或设置为display：inline-block

4.父元素设置浮动

border padding margin对与块元素行内元素以及行内块元素的支持

行内块和块元素四个方向都支持 border padding margin

内联元素支持padding，但是垂直方向的内边距不会影响布局（不会挤走下面的元素，而是盖住下面元素：前提是有背景色）水平会影响

内联元素支持border，但是垂直方向的边框不会影响布局（不会挤走下面的元素，而是盖住下面元素：前提是有边框色）水平会影响

内联元素支持水平外边距且不会重叠而是取和，不支持垂直外边距（设置无效）

margin负值：

margin-left为负：
- 元素向左移动，并且原来的位置不保留（后边元素会紧跟上一起移动），
- 元素向左移动，并不会挤到前边的兄弟元素，而是覆盖前边的兄弟元素
margin-right为负：
- 元素视觉大小不发生变化，不移动
- 但是元素实际所占用的空间变小，后边元素会跟上来或者是撑不开父级宽度
- 假如元素width为100px 设置marginright为-20 元素实际大小是80px（不会变小只是被覆盖）
margin-top为负：
- 元素向上移动，并且原来的位置不保留（下边元素会紧跟上一起移动），
- 元素向上移动，并不会挤到上边的兄弟元素，而是覆盖上边的兄弟元素
margin-bottom为负：
- 元素视觉大小不发生变化，不移动
- 但是元素实际所占用的空间变小，下边元素会跟上来或者是撑不开父级高度
- 假如元素height为100px 设置marginbottom为-20 元素实际大小是80px

right bottom自己都不动，正值都是推别人走，负值就把别人拉过来（被别人重叠）。

left top 正值负值都是自己动，负值重叠别人。

浮动元素一行排列设置右外边距宽度不够换行的解决方法

1，给浮动元素外面套一层宽度刚刚好的父元素DIV(inner)

2，给DIV设置overflow：hidden先清楚浮动，再给DIV(inner)的父元素设置overflow：hidden溢出隐藏。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XWXOaBek-1610017701450)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20200619194915713.png)]

.con{
            width: 950px;
            overflow: hidden;溢出隐藏
            border: 1px solid #000;
        }
        .con>.inner{
            width: 1000px;
            overflow: hidden;/*子元素浮动，父元素要清除浮动*/
            background-color: #ccc;
        }
        .inner>div{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;/*浮动 让多个块元素在一行排列*/
            margin-right: 50px;
        }

3，如果还有下外边距的话假设margin-bottom：50px ,则给DIV(inner)再设置margin-bottom：-50px

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MhzsjnaO-1610017701453)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20200619195256408.png)]

.con{
            width: 700px;
            overflow: hidden;
            border: 1px solid #000;
        }
        .con>.inner{
            width: 750px;
            overflow: hidden;/*子元素浮动，父元素要清除浮动*/
            background-color: #ccc;
            margin-bottom: -50px;

        }
        .inner>div{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;/*浮动 让多个块元素在一行排列*/
            margin-right: 50px;
            margin-bottom: 50px;
        }

边框画三角形

 .box{
            width: 0;
            height: 0;
            border: 100px solid #000;
            border-top-color: transparent;
            border-bottom-color: #ff8d9e;
            border-left-color: transparent;
            border-right-color:transparent;
        }

padding：

padding的支持性：
- 块标签：四个方向都支持
- 行标签：水平方向直接支持，垂直方向也支持设置，但是不能撑开元素的距离
padding不支持负值
padding也不去设置auto 不支持

盒子模型的状态

box-sizing属性可以切换盒子模型的状态

content-box：标准盒模型

border-box：怪异盒模型

标准盒模型：

元素占用的空间大小为：内容区域（content）+内边距（padding）+边框（border）+外边距（margin）

怪异盒模型：

ie6 或者是没有正确书写版本声明或者是设置了box-sizing
元素所占用的空间大小为：内容（content+padding+border）+外边距（margin）
怪异盒模型设置的width是 content+padding+border整体的宽度

盒子模型概念总结

在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间
盒子模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）四个构成
盒子模型分为怪异盒子模型和标准盒子模型
标准盒子模型的所占用空间的计算方式是 content+padding+border+margin
怪异盒子模型所占的的空间计算方式是 content+margin（content内容是包含内容内边距和边框的）
使用box-sizing属性可以切换盒子模型的方式

padding和margin的使用场景

padding和margin的使用场景
- padding：撑开内容与边框的距离 padding中会显示背景颜色和背景图片
- margin：撑开元素之间距离
日常使用过程中，可以按照下边方式来使用：
- padding和margin都可以撑开元素之间的距离。
- padding主要用来撑开父子之间的距离（父元素不设置高的话子元素到父元素之间的距离可以给设padding）
- margin主要用来撑开兄弟之间的距离

完全脱离文档流

1.浮动脱离文档流，不占位置，默认比文档流的元素高一层，会盖住文档流元素，但是不会盖住文字，且文字环绕在浮动元素周围。
2.浮动元素碰到父元素边框，其他浮动元素或者块元素停止。
3.浮动元素例如左浮动：先从右边开始然后上去碰到浮动元素停止然后再向左浮动。
4.行内元素块元素行内块元素设置浮动后都会变成块元素，如果不设置宽高的话靠内容撑开，没有内容显示空白。（完美支持margin 和padding ）

给父元素设置固定高度
给父元素设置overflow：hidden
在最后一个浮动元素后面（是浮动的兄弟元素）加空块元素如div 给DIV设置clear:both 属性
给父元素调用clearFix伪元素：after和：before分别代表最后边和最前边添加新伪元素

content:""; // 伪元素必须有内容才生效，

display:block; //为元素默认是行，要设置为块才会清除浮动

height:0; //为元素是空的，但是可能某些浏览器解析空元素会有高度，所以直接设置高为0

clear:both;// 清除浮动

给父元素设浮动

定位

概念

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素甚至浏览器窗口本身的位置。

position：relative 相对定位（占位定位）：不完全脱离文档流

设置相对定位后其在标准流位置还是存在，通过4个偏移量可以设置具体位置，参照自身在网页中的起始位置进行移动
和浮动可以一起用
left:正值向右
right：正值向左
top:正值向下
bottom:正值向上
四个值都存在的话，优先听 left 和 top的。

包含块：

绝对定位的元素相对于它的包含块进行定位
如何确定一个元素的包含块，完全取决于它自身的position属性：
- 如果一个元素自身的position属性是 static或者是relative：它的包含块就是离他最近的祖先元素或者是格式化上下文。（父级）
- 如果一个元素自身的position属性是absolute，
  
  它的包含块就是离他最近的拥有定位属性（值不为static）的父级元素
- 如果一个元素自身的position属性是fixed
  
  它的包含块就是viewport（视口）窗口
- 补充：如果一个元素的position属性是absolute 或者是 fixed 在下边几种情况下，包含块会发生改变
  
  1、当祖先元素的拥有 transform 或 perspective 属性并且值不为none的时候它也是被当做包含块
  
  2、当祖先元素拥有 filter属性的时候（值不为none）它也可以被当做包含块
- 如果由内向外找不到包含块条件的元素，那么html（根元素）被称作为初始包含块

position：absolute绝对定位：完全脱离文档流不占位置

相对其包含块进行定位，与自身位置无关，原有位置消失并且不占用位置
没有其他包含块的话默认包含块是HTML，然后参考点为第一屏的左上（ left top）或右下（right bottom）
绝对定位以后，浮动失效。margin padding仍然可以使用。
定位的原点以包含块的padding-box的左上角为原点。
父相子绝
设置绝对定位后内联设置宽高也起作用,不设置宽高靠内容撑开。

position：fixed 固定定位：完全脱离文档流不占位置

不为元素预留空间（脱离页面流）
相对于视口（viewport）的位置来定位元素的
滚动页面滚动条的时候，视口不发生改变，元素位置也不会改变

z-index:

只有定位元素（非static值）拥有 z-index属性
如果想要一个元素支持z-index属性，但是又不想定位影响其他元素或影响自己
则给当前元素设置相对定位即可使用z-index。
定位首先看父元素的层级，层级高的父子都高。
然后不设置z-index时且父元素层级一样，默认后写的盖住先写的，但是这时候给先写的父元素里的子元素可以通过设置z-index可以来盖住后写的父元素及其子元素。
父元素都设置相同的z-index时，再给前面的子元素怎么提都不能盖住后面的了。
父元素设不设置z-index是有区别的，即使数值相同。

最好是给父元素设置z-index提高层级，不要单独给前面元素的子元素设z-index来盖住后面的叔叔元素。

常用伪元素（导航栏竖线）

伪元素可以理解为“虚假的元素”，他们虽然会在内容元素的前后插入额外的元素，但并不会在文档中生成，在文档的源代码当中并不能够找到它们。
虽然在结构上是虚假元素，但是在表现上和普通元素没有什么区别，能为它们添加任何样式，比如改变文字颜色、添加背景、调整字体大小等等
伪元素必须拥有content属性，才能生效，伪元素默认是一个行内元素，伪元素对其他属性基本都是支持的

.box:after{
	content:"";
	display:block;如果定位就不用转块，一般配合定位使用
	width:
	height:
	background:
	样式都可以设置
}

其他伪元素

first-letter伪元素：

把一个块级元素的第一个文字选中，可以单独进行控制
first-line伪元素

把一个块级元素的第一行选中，单独进行控制

a标签的四个伪类

四个伪类

link：当有链接属性时

visited:当连接被访问过以后

hover：当连接被鼠标悬浮的时候

active:当连接在激活状态的时候
位置不能互换

这4个选择器优先级是一样的。

顺序改变就可能后边覆盖前边的

比如visited写在最后，那么当连接被访问过后，访问过后的颜色就会覆盖hover和active
记忆：爱恨法则 love-hate
hover适用于多数其他元素，并且伪元素也可以使用

样式重置

什么是样式重置（css reset）

将html的默认样式全部去掉，需要的时候我们自行添加。

统一页面风格
为什么是使用样式重置：

多数元素拥有自己的默认样式，并且我们很多都不需要

默认样式在不同浏览器中呈现的也不一定相同，就会导致浏览器展示页面不相同的现象

整个页面中固定的风格代码，可以在样式重置中直接书写，不用每一个都设置
为什么不使用

样式重置简单，不够完整一些demo可以使用，真正项目不推荐使用，请使用css reset

*通配符匹配所有的标签，影响很大效率很低
normalize.css是什么

normalize觉得，存在即合理。保留了应该存在的默认样式，并且把每一个默认样式在浏览器中中统一了

最小/最大宽度高度

使用 min-height 来设置最小高度

不设高度时父元素设置一个最小高度显示，然后内容多的话会撑开父元素但不会超出。
使用 min-width 来设置最小高度

案例中，当浏览器缩小窗口，生成横向滚动条的时候， head_out width：100%的宽度是屏幕的宽度，当滑动横向滚动条的时候，这个元素的宽度没有达到主要内容1000px的要求所以可以给head_out设置最小宽度 min-width:1000px;
最大宽度和最大高度

宽度：width min-width max-width

高度：height min-height max-height

当3个冲突后怎么办：

当min-width和max-width 冲突的时候，min-width是优先的
当width和 min或max冲突以后，min或者max直接无视width的存在（无论是否添加！important）

CSS hack

由于不同的厂商的浏览器，或者是同一个浏览器不同的版本（ie），对css的解析和认识不完全一样,可能会导致不同浏览器显示的效果不相同,那么我们需要针对某个浏览器，去写不同的样式，让代码能够兼容所有的浏览器
比如：

after伪元素清浮动，只有ie8及以上支持，所以要针对ie6、7书写一个开启haslayout

*代表ie6,7 zoom代表开启haslayout (类似bfc) 所以可以书写 *zoom：1；

那么这个代码只有ie 6 7 认识
```
.clearFix:after{
				content:"";
				display:block;
				height:0;
				clear:both;
				zoom:1;
}
```

空元素和替换元素

空元素

在html中，一个不可能存在子节点（注释节点，文本节点，元素节点）的元素就叫做空元素
通常在空元素上使用闭合标签是无效的

<input type="text"></input> ：闭合标签无效

br、hr、img、input、link、meta、source

替换元素

浏览器根据元素的标签和属性，来决定元素具体显示的内容
img、input、textarea、select、video、iframe是替换元素
audio、canvas标签在某些时候也是替换元素

calc方法：

calc()

我们可以把它当做一个函数，其实他是calculate（计算）缩写。

是css3提供的一个新功能，主要用来计算长度

我们可以用它来给padding margin width height font-size等等计算大小值值是一个动态的
注意

使用+ - * /进行运算

可以使用百分比 px em rem等单位

可以单位混合计算

在使用的时候，尽量在 + - * / 前后添加一个空格

 .box{
            width: calc(100% - 200px);
            height: calc(100px / 2 + 100px);
            margin: 0 auto;
            background-color: red;
        }
         <!--书写一个效果，让div永远距离两边都是100px
    计算div的宽度-->

常见布局：

粘连布局

又称作 stick footer布局
如果页面不够长的话 footer粘在视窗的底部
如果页面内容长度超出，footer就会被页面向下推送出去

就是不管内容多少，网页底部一直黏在浏览器窗口底部。

inner和footer是兄弟就行,最外层随便套不套

粘连布局方法1：（底部预留高度了）

直接计算inner的最小高度是 100% - 50px（50px是底部的高），现在直接就把footer撑到底部了。
footer在main元素小的时候，刚好跟着inner 在最下边。否则就被inner撑下去

<style>
		*{
            margin: 0;
            padding: 0;
        }
        
        html,body{
            height: 100%;
        }
        
         .inner{
            min-height: calc(100% - 50px);
        }
        
         footer{
            height: 50px;
            background-color: #5ab3f4;

        }
</style>

		<div class="inner">
                <h1>main区域 </h1>
                <h1>main区域 </h1>
                <h1>main区域 </h1>
                <h1>main区域 </h1>
        </div>
        <footer>
        </footer>

粘连布局方法2：（利用负margin-top上去重叠 padding-bottom）

给inner设置最小高度是100%
给inner设置padding-bottom是50px
给inner设置为怪异盒子模型：box-sizing：border-box
让footermargin-top为负上来

<style>
		*{
            margin: 0;
            padding: 0;
        }
        
        html,body{
            height: 100%;
        }
        
         .inner{
            min-height: 100%;
            padding-bottom: 50px;
            /*设置为怪异盒子模型的方式：
            高度就包含了padding  总共加起来是百分百  并且main不会显示在inner的padding中*/
            box-sizing: border-box;
        }
        
         footer{
            height: 50px;
            background-color: #5ab3f4;
            margin-top: -50px;

        }
</style>

		<div class="inner">
            <div class="main">
                <h1>main区域 </h1>
                <h1>main区域 </h1>
                <h1>main区域 </h1>
                <h1>main区域 </h1>
            </div>
        </div>
        <footer>
        </footer>

粘连布局方法3：（一样利用负margin-top上去重叠 padding-bottom）

给inner最小高度是 100%
让footer给margin-top：-50px (自身高度)上去（main元素和footer重叠）
给main元素一个padding-bottom 50px 就算重叠文字也显示不到padding中

<style>
		*{
            margin: 0;
            padding: 0;
        }
        
        html,body{
            height: 100%;
        }
        
         .inner{
            min-height: 100%;
            
        }
        .main{
            padding-bottom: 50px;
        }
        
         footer{
            height: 50px;
            background-color: #5ab3f4;
            margin-top: -50px;

        }
</style>

		<div class="inner">
            <div class="main">
                <h1>main区域 </h1>
                <h1>main区域 </h1>
                <h1>main区域 </h1>
                <h1>main区域 </h1>
            </div>
        </div>
        <footer>
        </footer>

块元素水平垂直居中方法1

在已知被居中元素的宽高的时候：
在定位的时候，直接使用calc方法计算left的百分之50 减去自身的宽度，一次性定位结束

position: absolute;
    在定位的时候，直接使用calc方法 计算left的百分之50 减去自身的宽度
    一次性定位结束*/
left:calc(50% - 150px);元素自身宽度一半
top:calc(50% - 100px);元素自身高度一半

块元素水平垂直居中方法2

position: absolute;
left:50%;
top:50%;
margin-left: -150px;
margin-top: -100px;

块元素水平垂直居中方法3（在不知道被居中元素的宽高的时候）

position: absolute;
/*在不知道被居中元素的宽高的时候：
   在定位的时候，定位设置50%   里边元素的左上角在容器的正中心，需要将元素向左和上 移动自身的一半 达到居中
   使用变形transform属性里的位移值 translate  translate的百分比是参考自身宽高的，所有不需要知道元素宽高即可
*/
left:50%;
top:50%;
/*transform是变形的属性，里边包含一个位移的值， 百分比是相对自身宽度的*/
transform: translate(-50%,-50%);

块元素水平垂直居中方法4（在不知道被居中元素的宽高的时候）

position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;

三列布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JDPIw3AB-1610017701456)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20200623181943629.png)]

1.全部左浮动（方法一：全浮动，使用calc设置宽度不推荐使用calc 兼容不好并且center不是优先加载）

		.left{
            width: 100px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .center{
            width: calc(100% - 200px);
            height: 200px;
            background-color: #009ff2;
            float: left;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: pink;
            float: left;
        }

2.方法二：left和right浮动，center不设置宽度 center必须写在最后，center不是优先加载

       .left{
            width: 100px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: pink;
            float: right;
        }
        .center{
            height: 200px;
            background-color: #009ff2;
            margin: 0 100px;
        }

3.方法三： center位置随便写，左右margin100px，不要设置宽度 left和right分别定位在两边缺点:无法进行等高布局

定位方法

		.left{
            width: 100px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: pink;
            position: absolute;
            right: 0;
            top: 0;
        }
        .center{
            height: 200px;
            background-color: #009ff2;
            margin: 0 100px;
        }

等高布局：

将等高元素padding-bottom设置很大一个值，
然后给父级设置overflow：hidden
给元素设置margin-bottom负很大的值，当小到一定程度，父级就是由其他元素撑开

        .left{
            width: 100px;
            background-color: red;
            float: left;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .right{
            width: 100px;
            background-color: pink;
            float: right;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .center{
            background-color: #009ff2;
            margin: 0 100px;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

圣杯布局:

保证中间的center优先加载，所以center写在最前面
outer预留两边DIV的固定宽度（可以padding 也可以用 margin吧）
center left right 全浮动，且center宽度为100%，然后位置不够 left 和right 自动换行下面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4zSWJLL9-1610017701457)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20200625154232869.png)]

再给left 设 margin-left的值为负100%移到center里去，最后通过给自己相对定位移到最开始 outer左边预留的空间去

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T0aYu3Kn-1610017701459)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20200625154656067.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ij0vKGK-1610017701461)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20200625154711978.png)]

right 设 margin-left的值为负自身的宽度移到center里，最后一样通过给自己相对位移到最开始 outer 右边预留的空间去
注释：right可以通过直接margin-right的值为负自身的宽度移到预留位置去，不需要再相对定位移

<style>
        .outer{
            width: auto;
            margin: 0 100px;  /*预留空间*/
            overflow:hidden; /*这是为了等高布局而设置的溢出隐藏，这里正好可以用来清楚浮动*/
        }
        .center{
            width: 100%;
            height: 200px;
            background-color: red;
            float: left;

            padding-bottom: 10000px;
            margin-bottom: -10000px;     /*这个是等高布局的代码*/
        }
        .left{
            width: 100px;
            height: 200px;
            background-color: #009ff2;
            float: left;
            margin-left: -100%;     参照outer 
            position: relative;
            left: -100px;           /* 移动自身的宽度也是预留的宽度*/

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: #0ee69c;
            float: left;

            margin-left: -100px;
            position: relative;
            right: -100px;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
</style>
</head>
<body>
<!--
    保证center优先加载，所有center放在第一个

    内容足够小的时候，内容会换行
-->
    <div class="outer">
        <div class="center">
        </div>
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>

双飞翼布局：

1.给center添加一个父级main（main全屏，center添加两边的margin），让main和left right进行排列
2.给left margin-left -100% 直接到位， right margin-left:-100px（只身的宽度）也直接到位

自己的理解如下：

给center套了一个父级main ，设置宽度100% 。

然后让main left right 进行浮动。

再让center margin两侧预留出 left 和 right 的固定宽度。

最后给left margin-left -100% 直接到位, right margin-left:-100px（自身的宽度）也直接到位，都不用进行定位移动了。

        .outer{
            overflow: hidden;/*这是为了等高布局而设置的溢出隐藏，这里正好可以用来清楚浮动*/
        }
        .main{
            float: left;
            width: 100%;
        }
        .center{
            margin: 0 100px;/*预留空间*/
            height: 100px;
            background-color: red;

            padding-bottom: 10000px;
            margin-bottom: -10000px;/*这个是等高布局的代码*/
        }
        .left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-left: -100%;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .right{
            float: left;
            width: 100px;
            height: 100px;
            background-color: #009ff2;
            margin-left: -100px;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
    </style>
</head>
<body>
<!--
    1.给center添加一个父级main（main全屏，center添加两边的margin），让main和left right进行排列
    2.给left margin-left -100%  直接到位  ，  right margin-left:-100px  也直接到位
-->

    <div class="outer">
        <div class="main">
            <div class="center">
                
            </div>
        </div>
        <div class="left">
            
        </div>
        <div class="right">
            
        </div>
    </div>

text-overflow: ellipsis;单行，多行文本溢出显示 . . .

white-space: nowrap;规定段落文本不换行

hover div上浮阴影效果

position: relative;
transition: all 0.2s linear;
z-index: 1;

hover：
z-index: 2;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
transform: translate3d(0, -2px, 0);

border阴影效果

border-bottom: 1px solid #e0e0e0;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);

weixin_54005667

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css基础

1.常见浏览器常见的五大浏览器有 ie 火狐谷歌 safari 和opera等ie：是Trident内核。Firefox（火狐)：Gecko内核，代码完全公开，开发程度高。safari：WebKit内核。chrome(谷歌)：Blink内核，blink其实是webkit的分支，大部分国产浏览器最新版用blink内核。opera:用的也是blink内核移动端就Android手机而言，使用率最高的就是WebKit内核。2.网页的组成结构：HTML表现：css行为: JavaScri
复制链接

扫一扫