黑马程序员技术交流社区

标题: 技术贴 [打印本页]

作者: zyh54 时间: 2019-6-7 19:42
标题: 技术贴

今天来分享一下这十几天来对html及css方面的一点知识积累

Html方面web三个标准

结构（对网页元素进行整理和分类），HTML

表现（设置网页元素的版式、颜色大小等外观样式），CSS

行为（网页模型的定义及交互的编写）。JavaScript

HTML是超文本标记语言是用来描述网页的一种语言。（1.超越文本限制 2.超级链接文本）

HTML作用：网页是由网页元素组成的，这些元素是利用html标签描述出来的，然后通过浏览器解析，就可以显示给用户了。

HTML骨架：

<html>

<head>

</head>

<body>

</body>

</html>

分类：双标签（<标签名>内容</标签名>）

单标签（<标签名 />）

图像标签（单标签）

属性	属性值	描述
src 必须属性	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度

宽度高度等比缩放一般只需改一个

链接标签（双标签）

<a harf="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

可以使用#代替空链接，外部链接需加http:

属性	作用
herf 必须属性	用于指定链接目标的url地址，当为标签应用herf属性时，它就具有了超链接的功能。
target	用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

特殊字符

	空格	&nbsp
<	小于	&it
>	大于	&gt

以&开头，以；结尾

Input属性

value 默认值：没有交互效果 --- value=“输入文本内容”

placeholder:占位符 html5的新属性，有交互效果 --- placeholder="输入文本内容

name: 给当前的数据起一个名字，让后台工作人员调用

文本框：input的type取值为text

密码框：input的type取值为password

单选按钮：type=“radio” ,想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类；

复选按钮：type=“checkbox”，也可以设置同样的name名称，但是不会影响多选的效果；

普通按钮：<input type=“button” value=“普通按钮” /> 必须要自己设置value值；

提交按钮：<input type=“submit” />；可以设置自己的value值也可以用默认的；

重置按钮：<input type=“reset” />；可以设置自己的value值也可以用默认的；

图片按钮：<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径；

文件域：<inputtype=“file” /> 上传文件使用。

单选按钮和复选框的默认选中

设置对应的属性checked=“checked”

select下拉列表

一对select标签嵌套多对的option标签

</select>

如果option有selected=“selected”表示默认选中。

CSS方面

简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化。

Css书写位置可分为：

行内样式表：书写方便，权重高。缺点：没有实现样式和结构相分离；

内部样式表：部分结构和样式的分离。缺点：没有彻底分离；

外部样式表：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入。

Css选择器

选择标签的，把想要选择的元素标签选择出来。

基础选择器：标签选择器（html选择器）、类选择器、ID选择器

复合选择器：后代选择器、并集选择器、指定标签选择器

文本水平居中 text-align: center

实际的意思是让文本在父级盒子里居中显示，实际工作中text-align:center;不紧可以让文字居中，也可以让行内元素（a、span、b、strong、u、i、s、em、ins），行内块元素（img、input、button）在父级盒子中居中；

注意：想要元素利用text-align: center;居中显示，必须要有一个父级盒子；

文本的行高 line-height

文本首行缩进 text-indent

text-indent:2em; 首行缩进2个字；

文本线条装饰 text-decoration

text-decoration:none;没有线

text-decoration：underline；下划线

text-decoration:line-through;中划线/删除线

text-decoration:overline; 上划线

链接的伪类四种状态：

a:link 未访问的链接（访问前）

a:visited 已访问的链接（访问后）

a:hover 鼠标移动到连接上（鼠标经过）

a:active 选定的链接（按下鼠标的时候）

注意：以上的顺序不能颠倒；

标签的显示模式分为以下三种：

块级元素：自己独占一行； --- 代表标签 div、h标签

常见的块级元素：div/p/h1-h6/ul/li/dl/dt/dd

行内元素：一行可以共存多个；--- 代表标签 span 、a

常见的行内元素：a span u s del strong em i ins 等；

行内块元素：一行可以共存多个； --- 代表标签 img 、 input

特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式；

将元素转化为块级元素：display:block;

将元素转化为行内元素：display:inline;

将元素转化为行内块元素：display:inline-block;

实体化三属性

宽width

高height

背景background

注意：这三个属性属于我们布局的中流砥柱，只要这三个值设置好了，我们书写的网页就很少出现兼容问题；

背景图片固定：

background-attachment:fixed;

背景的复合写法

background:背景颜色 url（）平铺方式是否固定 X轴 Y轴；

让图片的中间位置显示出来，可以是用background-position: center 0；表示X轴（水平方向居中），Y轴（垂直方向贴顶）；

背景颜色半透明

background：rgba(0,0,0,透明度);

R红色 g绿色 b蓝色 a透明度小数点前面的0可以不写；

注意：设置了背景颜色透明是不会影响盒子里面的内容的透明度的；

Css权重

特等 !important 提高权重，有提权的效果，有了样式优先生效；老大

第一等：代表内联样式，如: style=””，权值为1000。 1,0,0,0

第二等：代表ID选择器，如：#content，权值为100。 0,1,0,0

第三等：代表类，伪类和属性选择器，如.content，权值为10。 0,0,1,0

第四等：代表类型选择器和伪元素选择器，如div p，权值为1。 0,0,0,1

第五等继承性权重值为0 0,0,0,0

盒子模型组成

内容：实体化宽高和里面的文字图片等等

边框： border

内边距： padding 拉开内容到盒子边缘的距离；

外边距： margin 拉开盒子与盒子之间的距离；

边框的综合写法

边框的宽度：border-width: 3px;

边框的样式：border-style: solid;

常用的线条样式：solid实线 dashed虚线 dotted点线

边框的颜色： border-color: red;

综合写法：border:边框宽度边框样式边框颜色；

Padding相关设置（不同方向的设置）：

padding：30px；表示四个方向的取值都一样；

padding：30px 60px；表示：上下左右取值；

padding：30px 50px 60px；表示：上左右下取值；

padding：30px 40px 50px 60px；表示：上右下左取值；

注意：添加了padding和border盒子会撑大：

text-align: center; 和margin:auto; 的区别

margin

只能让块级元素居中显示，而且必须要有固定的宽度。

text-align: center

本来的意思是让文本居中，实际也可以让行内元素、行内块元素居中显示，如果想要用text-align: center;让行内元素和行内块元素居中，我们必须要有一个父级元素将行内元素和行内块元素包裹起来，然后设置父级盒子的text-align: center;但是实际工作中我们不建议这么使用。

插入图片和背景图片区别

内容一般用插入图片，装饰性的小图标一般用背景图片；

插入图片移动位置要使用盒子模型的外边距margin和内边距padding设置；

背景图片移动位置用背景图片额度定位background-position进行设置；

并列垂直外边距合并

两个盒子如果垂直排列（上下排列），上面的盒子设置了marin-bottom,下面的盒子设置了margin-top，最终显示的样式两个值谁大就显示谁；

解决方案：不要同时设置，只给一个盒子设置即可；

嵌套垂直外边距合并

如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；

解决方案：1为父级设置上边框（不用）；2直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；（不推荐使用）；3直接给父级添加overflow:hidden;（常用方法）---强制区分了父子级关系盒子圆角

正圆：如果想要得到正圆我们必须是一个正方形，然后设置border-radius: 50%;

胶囊形状：首先是一个长方形，然后设置border-radius的取值为长方形高度一半；

盒子阴影

box-shadow: 水平阴影垂直阴影模糊距离 阴影大小 阴影颜色 内/ 外阴影；

水平阴影：让阴影在水平方向位移

垂直阴影：让阴影在垂直方向位移

模糊距离：阴影的羽化（虚实）大小

阴影大小：设置阴影的大小，一般不设置

阴影颜色：设置阴影的颜色

内/ 外阴影：默认是外阴影，inset是设置内阴影

文字阴影同理

网页布局的三种机制

普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table；

行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行；常用元素：span、a、i、em；

浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；

定位：将盒子在浏览器的某一个位置，后期会经常用到；

浮动的特点

浮：浮动之后的元素脱离了标准流；

漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；

特：1、浮动之后的盒子的显示模式会更改为行内块元素的特点；

2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；

3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

关于图片插入底部留白

Html中插入图片的时候会出现2-4px的底部留白

解决方案：01、给所有的图片img设置一个vertical-align: middle;让图片的对齐方式为中心基线对齐；02、将图片转换为块元素display:block; -- 不建议使用。

overflow

overflow:hidden; 溢出隐藏，将超出固定宽高的盒子的内容隐藏掉；

overflow:auto; 溢出滚动，将超出固定宽高的盒子的内容以滚动条的像是显示

列表布局父级盒子装不下最后一个掉下来问题

布局的时候我们的版心是固定的，如果给子级盒子添加了margin-left或者margin-right，最后一个子级盒子会掉下来，

解决方案：直接给父级盒子的宽度大于版心盒子即可；

定位属性：position 取值不同实现的效果不同，如下：

静态定位：position:static;

相对定位：position:relative;特点：相对于自己原来的位置为参照物进行位移，属于占位定位，盒子仍然在标准流里面；

绝对定位：position:absolute;参照物：默认情况下是自己的父级盒子，但是如果绝对定位的父级盒子没有任何定位属性，参照物就以浏览器为参照去进行定位；

固定定位：position:fixed;参照物：电脑屏幕（可视窗口）；

定位的叠加书序z-index

z-index是定位的z轴显示：

只能用于相对定位、绝对定位和固定定位，数值越大越靠前，取值没有单位；

取值：0，正整数，负整数，默认值0；

鼠标的手型图标

cursor:pointer;

display显示与隐藏

隐藏：display:none; 属于不占位隐藏

显示：display:block; 将隐藏的元素显示出来

visibility显示与隐藏

占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；

overflow溢出隐藏

overflow:hideen;溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；

overflow:scroll;显示横向和竖向的滚动条显示（不用）；

overflow:auto;溢出滚动，将超出固定宽高范围的内容以滚动条的形式显示（不用）；

vertical-align:middle;让行内元素、行内块元素垂直居中；

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2