html标签之表格标签,稳进大厂

java基本类型的转换,纯干货

  返回  

华宇培训第九天学习笔记-html和css

2021/7/21 16:50:49 浏览:

2021-7-21

标签分为:

块级元素

Div form table p h1-h6
高度,行高以及外边距和内边距都可控制;
宽度默认是它的容器的100%,除非设定一个宽度
它可以容纳内联元素和其他块元素

行内元素(内联)

Span a I
和其他元素都在一行上;
高,行高及外边距和内边距不可改变;
宽度就是它的文字或图片的宽度,不可改变
对行内元素,需要注意如下:
设置宽度width 无效。
设置高度height 无效,可以通过line-height来设置。
设置margin 只有左右margin有效,上下无效。
设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

行内块元素

Img input textrea …
和其他元素都在一行上;
高度,行高以及外边距和内边距都可控制;

a标签

  • href=“http://www.baidu.com”
  • target="_blank" ----另起一页显示
  • target="_self" ----在本页显示

input标签

type类型:

  • 单行文本域:text
  • 密码域:password
  • 复选框:checkbox
    • checked默认选项
  • 单选框:radio
    • name需相同
    • checked默认选项
  • 按钮:button
  • 提交:submit
    placeholder:默认显示文字

textarea多行文本域

select下拉菜单

  • option选项标签
  • selected默认选择

css

引用外部文件

“< link rel=“stylesheet” type=“text/css” href=“css/baidu.css”>”

reset.css 重置样式

类选择器 用.

id选择器 用#

类选择器和id选择器区别

相同点:可以应用于任何元素不同点:
1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

子选择器

.父标签 > 子标签{ 样式....}
例子:

.food>li{
border:1px solid red;
}

包含(后代)选择器

即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:

.first span{
color:red;
}

请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

伪类选择符

为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:a:hover{color:red;}

分组选择符 ,

多种标签应用相同样式用,分割。
例子

h1,span{color:red;}

它相当于下面两行代码:

h1{color:red;} 
span{color:red;}

继承

设置p标签的样式 p标签内部的span标签也会继承相同样式
p{color:red;} < p>三年级时,我还是一个胆小如鼠的小女孩。< /p>

特殊性

类、id、标签都设置样式 应用哪个?
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。

层叠

相同权值的标签:后边覆盖前面,即后面的样式会被应用。

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

重要性!important

设置某些标签拥有最高权值
p{color:red!important;} p{color:green;}
注意:!important要写在分号的前面

记住

P{
	font-family:’微软雅黑’           文字字体
	font-size:12px		      		字号
	color:red		      			颜色
	font-weight:bold;		      	粗体
	font-style:italic;		      	斜体(不常用)
	text-decoration:underline;	    下划线
	text-decoration:line-through;  	删除线
	text-indent:2em;		       	缩进(2em指的是文字的两倍)
	line-height:20px;		       	行高
	letter-spacing:50px;	       	文字间隔
	text-align:center;		       	对齐
}

字体缩写

body{ font:12px/1.5em “宋体”}(常用)

  • 使用这一简写方式你至少要指定 font-size 和 font-family 属性
    在缩写时 font-size 与 line-height 中间要加入“/”斜扛

常用元素

常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>
常用的内联块状元素有:
<img>、<input>

块级元素

块级元素特点:

  1. 每个块级元素都从新的一行开始,并且其后的元素也另起一行。
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。
  3. 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
    设置display:block就是将元素显示为块级元素

内联元素

内联元素特点:

  1. 和其他元素都在一行上;
  2. 元素的高度、宽度及顶部和底部边距不可设置;
  3. 元素的宽度就是它包含的文字或图片的宽度,不可改变。
    当然块状元素也可以通过代码display:inline将元素设置为内联元素。

inline-block 元素特点:

1、和其他元素都在一行上;
2、元素的display:inline-block高度、宽度、行高以及顶和底边距都可设置。
就是将元素设置为内联块状元素。

行内块元素会有空隙。 解决办法: 父节点font-size设置为0,浮动float

Css盒模型

在这里插入图片描述

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

边框

div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框:
常用缩写

div{ 
border:2px solid red; 
}

分开写

div{ 
border-width:2px;
border-style:solid;
border-color:red;
 }

border-style(边框样式)常见样式有:
dashed(虚线)| dotted(点线)| solid(实线)。

div宽度默认100% 但是默认没有高度

高度和宽度

一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。元素的高度也是同理。
在这里插入图片描述

填充padding

元素内容与边框之间是可以设置距离的,称之为“填充”。
填充也可分为上、右、下、左(顺时针)。如下代码:

div{
padding:20px 10px 15px 30px;
}

顺序一定不要搞混。可以分开写上面代码

div{ 
padding-top:20px; 
padding-right:10px; 
padding-bottom:15px; 
padding-left:30px; 
}

如果上下填充一样为10px,左右一样为20px,可以这么写:

div{
padding:10px 20px;
}

边界 margin 同理

总结一下:padding和margin的区别,padding在边框里,margin在边框外。

css布局模型

在网页中,元素有三种布局模型:

  1. 流动模型(Flow)
  2. 浮动模型 (Float)
  3. 层模型(Layer

流动模型

先来说一说流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。

浮动模型

块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?设置元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

div{ 
width:200px;
 height:200px; 
 border:2px red solid; 
 float:left; 
}
 <div id="div1"></div> <div id="div2"></div>
div{ 
width:200px; 
height:200px; 
border:2px red solid; 
float:left; 
} 

< div id=“div1”>< /div> < div id=“div2”>< /div>

清除浮动

子元素Float之后,父元素如果未设置高度的话,高度会消失,这个时候需要清除浮动

  1. 给父元素设置高度
  2. 给父元素overflow:hidden
  3. 添加带有clear:both的标签

层模型 定位position

  1. 绝对定位(position: absolute)
  2. 相对定位(position: relative)
  3. 固定定位(position: fixed)

绝对定位

position:absolute(表示绝对定位),
left、right、top、bottom
没有设置position:absolute则相对于body元素,即相对于浏览器窗口,进行定位。
设置了position:absolute则相对于其父包含块进行定位

相对定位

position:relative(表示相对定位)
相对于以前的位置移动

固定定位

position:fixed:表示固定定位,
与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。

水平居中

行内元素-水平居中

文本、图片
text-align:center

定宽块状元素-水平居中

定宽块状元素:块状元素的宽度width为固定值。
margin:0 auto;
例子:

div:{
	width:300px;
	margin:0 auto;
}

Ps: 当元素被定位时 auto失效

看到最后的帮忙

点个👍🙏 谢谢,这个对我真的很重要!

在这里插入图片描述

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号