html&css

Amberer
273 阅读10分钟

html&css简介

html:负责网页结构的

css:负责网页样式的

html:由标签组成

单标签：没有内容

双标签：开始标签和结束标签 可以放内容的

所有写在元素开始标签之中的都是该标签的属性

：用来声明文档类型 代表了整个网页，这个元素包裹了整个完整的页面，是一个根元素。 用来写网页的一些配置信息

声明文档的编码格式

负责网页标题 负责网页内容

格式：标签换行， 开始标签和结束标签要对齐（一条竖线）

子父级之间相差一个tab键

网页布局

给元素/标签加样式

（1）内联/行内样式：写在元素开始标签里面的方式
<div style="color:red;">你好</div>

（2）内部样式：写在head里的style标签里 需要大括号包裹

class属性：可以重名

class命名规范：不能用中文，不能用特殊符号（除了_-）不能用纯数字 不能以数字打头，不能用大写字母，不能有空格 见名知意

id属性:不能重名

（3）外部样式

href后面跟的是路径

绝对路径：不需要参照物 www.baidu.com

相对路径：有参照物的,参照的是当前文件

（4）样式的优先级

!important>内联样式>内部样式(id>class>标签名)(后>前)

内部样式=外部样式

权值计算公式：

权值 = 第一等级选择器 x 个数，第二等级选择器 x 个数，第三等级选择器 x 个数，第四等级选择器 x 个数；

注: 通用选择器 (*)，组合符 (+, >, ~, ' ')，和否定伪类 (:not) 不会影响优先级

改变元素位置

margin(外边距)：

当只指定一个值时，该值会统一应用到全部四个边的外边距上。

指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。

指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的 外边距。

指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。

问题：

margin塌陷：

子父级之间，顶部想隔开距离，给子集加margin-top会发生塌陷，也就是这个margin会加在父级身上，导致父级整体往下移（浮动元素除外）

image.png

margin合并：在垂直方向上，同级，临边margin会合并为一个，取较大值

padding(内边距)

问题：会自动的增宽或者增高，所以我们要主动的减去对应的宽高

position(定位)

absolute(绝对定位)：想改变谁的位置，就给谁加绝对定位，需要给top left right bottom

绝对定位的元素默认参照的是已定位的父级元素，就近

realtive（相对定位）:想以谁当作参照，就给谁加相对定位

fixed（固定定位）：几乎等同于绝对定位，只不过参照物不同，参照物是我们的浏览器

问题：绝对定位和的固定定位的元素不占位置 （脱离文档流）

脱离文档流：该元素脱离了文档中。不再占据默认分配的空间，它下面的元素会上去补位。可以理解为脱离文档流的元素离开了它的座位，后面的同学可以坐前面，坐它的位置。

BFC(块级格式上下文)

BFC定义

BFC是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的子元素（换句话说就是直接子元素），具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

触发BFC

只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素

浮动元素：float 除 none 以外的值

绝对定位元素：position (absolute、fixed)

display 为 inline-block、table-cells、flex

overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC的应用

BFC解决margin塌陷和margin合并

1666399341171-3526649f-27f0-411d-a4c2-5b5ed09e706a.png

BFC解决浮动的元素高度无法撑开的问题。

image.png

BFC可以阻止标准流元素被浮动元素覆盖

image.png

image.png

浮动：可以让块元素在一行上显示

语法

希望哪几个元素在一行上显示，那么就给哪几个元素加浮动

float:left/right

问题

半脱离文档流，不占位置，但是如果其他盒子内有文字，文字会卡住

解决方式

方法一：clear:both

在浮动的元素元素后面添加一个元素，样式为clear：both

clear:both 需要放在所有浮动元素之后，并且是同级关系。页面中有几处浮动，那么就需要清除几次

在需要清除浮动的父级上加clear 可以清除浮动

方法二：使用css的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动

方法三：给浮动的元素的容器添加浮动

副作用：父级被加了浮动，会造成父级脱离文档流

当出现这种情况，自己浮动就不用清除浮动了

方法四：使用CSS的:after伪元素

通过css在页面里插入一个伪元素

注意：这不是伪类，而是伪元素，代表一个元素之后最近的元素。

.clear:after{
Display : block;
Clear :both;
Content：“”；
Height：；
}

9.元素的默认宽高

元素的默认宽高

默认宽度：父级的百分百（浮动元素除外, 脱离文档流的元素）

默认高度：由子集+padding决定

浮动元素的默认宽：由子集决定

定位元素的默认宽：由子集决定

自己超出父级的部分不占位置

css选择器

1.通用选择器

2.元素选择器

div p a

3.类选择器

.box

4.id选择器

#box

5.分组选择器

.box,span

6.组合选择器

div p

ul>li

p~span

p+span

display属性

用途：将块元素和内联元素是互相转换

block:转为块元素

inline:转为内联元素

inline-block:转为内联块

none:无

元素/标签

块元素： div h1-h6

内联元素：span a

区别：

1.块元素有宽高，内联元素没有宽高 2.块元素要独占一行，内联元素默认在一行上显示

Ps:

内联元素里不允许包含块元素，内联元素里面只能放内联元素

块元素里面可以放任意元素

插播一个li标签

去除旁边的点：list-style：none；

文字样式

某元素加了文字样式，只对它里面的文字生效

text-align:center 文本对齐方式，让文本居包含文本的这个块的中间

color:#ff6637 文字颜色

font-family:"宋体"

font-size："16px"

font-weight:"bold"字体加粗100-700（没有单位）

line-height:100px 垂直居中：只需要把行高设置为跟外层div高度一致即可

任何文字样式都是可继承的

继承原则：就近原则另外特殊的 opacity也是可继承的

居中问题

任何情况下不要拿显示器边缘当参照

auto:自动计算剩余空间

margin:auto 给块做居中 前提必须得有宽

文本居中可以用text-align 对于块元素不能使用

伪类

元素：hover{鼠标滑过之后的样式}

如果滑过元素更改另一个元素的样式

元素：hover 要更改的元素{要更改的样式}

要更改样式的元素必须是鼠标滑过元素的子集

a标签

target="_blank" 代表在新标签页打开，默认为_self,在当前窗口刷新

href="路径" 可以是绝对路径也可以是相对路径

去除a标签下面的线：text-decoration: none;

引入图片的方式

1.img标签直接引入

Img属性：

Src图片路径

Alt图片加载不出来时的替代文本

Title 鼠标悬停时的文字提示

2.通过背景图方式引入background-image：url( );

什么时候选择用背景图方式引入：

1.如果图片可能超出显示器尺寸的时候，选择用背景图

2.如果图片里面还有内容，需要继续编辑，选择用背景图

其他情况推荐img

图片格式：

.jpg：会自带背景，图片比较小（有一些背景图用这个）

.png：不会带背景，背景是透明的，图片比较大

描边、圆角、半透明

border: chocolate(颜色) 2px(粗细) solid/dashed(直线/虚线)

border-radius 圆角

opacity:0.5 半透明 会导致元素里面的内容也变成半透明，因为opacity是可继承的

background-color:rgba(51,51,51,0.5) 不会导致里面内容也变成半透明

表单标签

<input/>

属性：

  1. Placeholder=‘请输入搜索内容’ 占位符，搜索框里的默认文本
  2. type=password密码输入框
  3. value = 可输入的表单不给value
  4. type = button 按钮标签
  5. type = checkbox 多选框 name属性用来给多选框分类

  1. type = radio 单选框 同一系列记得给name
  2. 下拉表单

8.selected默认选中

按钮标签

<button></button>

投影：box-shadow

box-shodow：水平偏移距离 垂直偏移距离 模糊程度 投影大小 投影颜色

百分比问题

百分比数参照物

父元素宽度：Padding margin（参考父级的宽） width

父元素高度：height （父元素为body不生效）

自身：border-radius

已定位的父级:position:

Position（left/right）参考已定位父级的宽

Position（top/bottom）参考已定位父级的高

css中的单位

px

em

rem (root em)

盒模型

Margin(外边距)  - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的 。

Content(内容)  - 盒子的内容，显示文本和图像。

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

flex布局

优点：简单，页面不容易错乱

缺点：不适合精准布局

应用：移动端

HTML5 CSS3

1.video

<video width="320" height="240" controls>
  <source src="movie.mp4"  type="video/mp4">
</video>

属性：

controls 视频播放控件(进度、音量、全屏、播放)

autoplay 自动播放

loop 循环播放

<audio  controls>
  <source src="music.mp3"  type="video/mp3">
</video>

2.html语义化

header footer nav aside

3.css3

transform(转换) 2d（可以代替margin来用，但是不常用，不建议用）

rotate:旋转（就这个有点用）

translate:偏移 针对你当前位置的基础上

skew（30deg）:倾斜

scale:缩放 物理缩放 不占位置 不影响结构

transform 3d（做特效）

rotateX

rotateY

transition：过渡 让样式的变化有一个过程(动画) （有点用）

animation:动画

@keyframes 动画名{

From{}//从。。。变成。。。

To{}

}

.box{

Animation: 动画名1s}

响应式布局的媒体查询

@media screen

@media screen and (max-width: 300px) {

    body {

        background-color:lightblue;

    }

}

Rem搭配媒体查询一起用

响应式布局

1.百分比 最简单最常用

2.@media screen 最强大最复杂的

3.rem 最适用于移动端

4.flex(弹性)布局 ：粗略布局，不适用于精确计算

avatar
文章
阅读
粉丝