HTML+css零碎小知识

1、设置了float浮动的元素和绝对定位position：absolute的元素会脱离正常的文档流。但是设置absolute的元素不会占据空间，相当于隐形了。

2、相对定位position：relative是指相对于文档流中的其它已经定义的元素位置进行定位。在不设置top/left/right/bottom/Z-index等值的情况下和默认值static表现一样。

3、绝对定位position：absolute是相对于上一个不为static默认定位的父元素进行绝对定位。若父元素没有指定position，该元素会相对于整个html文档进行定位。

4、overflow：auto;一种清除浮动的方法，在具有浮动元素的父容器中添加，这样父容器就会有一个高度,随着子元素高度增加而增加。

5、考虑浏览器宽度变小的时候，要加min-width~

1、实现子元素在父元素中的水平和垂直居中。父元素和子元素需要设置宽度和高度，父元素相对定位，子元素绝对定位并且设置magin:auto和top:0;left:0;right:0;bottom:0;

2、经常会使用到用border-radius来设置元素边框圆角。

3、可以通过设置相对定位和绝对定位同时设置top或right或left或bottom来进行定位。

4、可以通过float，设置margin-left等来进行定位。position：absolate和float会使元素脱离正常的文档流，两者结合通过设置top等，也可以进行定位。

.div{width:158px;padding:20px;border:1px solid #ccc；margin：10px；}

在浏览器审查元素时显示的width=200px; 200=158+20x2+1x2=200 不计算外边距

box-sizing属性：

box-sizing:border-box; //border和padding计算入width之内，上面的例子width就等于158px；

box-sizing:content-box; //border和padding不计算入width之内

box-sizing:padding-box; //padding计算入width之内

outline:1px solid red;轮廓：绘制元素周围的一条线，与border相比，outline是不占空间的。

css文本属性：line-height行高 letter-spacing 字符间距 word-spacing 字间距 text-indent 缩进

若文本本是在父元素中居中显示，使用letter-spacing：20px后，文本不居中了。则设置text-indent：20px；或者使用padding-left。

font-variant:small-caps;把段落设置为小型大写字母字体。

font-style：italic；字体为斜体。

z-index设置元素堆叠顺序。仅在定位元素即设置position元素上生效，设置数值越高则越离用户越近。

p:target{ ... }

URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element), :target 选择器可用于选取当前活动的目标元素。

实例：

.slider li:target{

-webkit-animation:scroll 500ms linear;

-moz-animation:scroll 500ms linear;

-o-animation:scroll 500ms linear;

animation:scroll 500ms linear;

position:absolute;

z-index:2;

//linear 是指过渡的时候动画速度全程一致

}

@keyframes scroll {

0%{

left: -100%;

}

100%{

left: 0%;

}

点击输入框时宽度以600ms速度从120px速率缓慢变大到220px

#big-input{

width: 120px;

margin-top: 20px;

margin-left: 40px;

-webkit-transition: width 600ms;

-o-transition: width 600ms;

-moz-transition: width 600ms;

transition: width 600ms;

}

#big-input:focus{

width: 220px;

}

类似margin顺序：a,b,c,d；上右下左

html: <b>粗体<i>斜体<strong>强调文本<em>强调文本

type: text文本域 password密码 radio单选按钮 checkbox复选框 submit提交按钮

<lable></lable>定义<input>元素的标签，一般为输入标题。

下拉框：<select><option></option><option></option>...</select>

一、元素分类--块级元素

什么是块级元素？在html中div、 p、h1、form、ul 和 li就是块级元素。设置display:block就是将元素显示为块级元素。a{display:block;}就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

二、元素分类--内联元素

在html中，span、a、label、 strong和em就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。 div{display:inline;}就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

三、元素分类--内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，img、input标签就是这种内联块状标签。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

合并单元格（电话占两格）：

<h4>横跨两列的单元格：</h4>

<tr>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

<h4>横跨两行的单元格：</h4>

<tr>

<td>Bill Gates</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。

如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。

<colgroup> 标签只能在 table 元素中使用。

所有主流浏览器都支持 <colgroup> 标签。

Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性。

<table>

</colgroup>

<tr>

</tr>

</thead>

<tr>

<td>百度前端技术学院</td>

</tr>

<tr>

<td>百度前端技术学院</td>

</tr>

</tbody>

</table>

这样就可以通过.colgroup对每一列单元格进行样式更改。

选择器：[class*=‘col-‘] 选择类名中含有col-的所有元素

隐藏元素：

display：none；隐藏元素后不占据任何空间，相当于消失。

visibility：hidden；隐藏元素后依旧占据空间，影响布局。

css伪类：before和：after

p:before{

content:"哈哈";

background-color:red;

color:black;

font-weight:blod;

}

p：before指在每个<p>元素之前插入内容，并设置插入内容的样式。

如果不需要内容，只配合样式，那么content也不能为空，需要这样写 content : "";

这些添加不会改变文档的内容，不会出现在DOM中，不可复制

：after指在指定元素后面添加内容。

eg：当不触发div1时，div2不可见，当触发div1时，div2可见。

.div2{

width:100px;

height:100px;

display:none;

}

.div1:hover .div2{

display:block;

}

eg:绘制一个头部向右的白色三角形：

div{

width:0;

height:0;

border-width:15px;

border-style:solid;

border-color:transparent transparent transparent #fff;

//上右下左分别为透明透明透明白色

}

eg:做一个弹出对话框，对话框上方有一个带边框的三角形：

写两个相同的三角形，下面的三角形背景颜色是对话框边框的颜色，上面的颜色是对话框的背景颜色。

将上面的三角形相对于下面的三角形向下移动1px。

响应式@media：

浏览器宽度大于768px时：@media only screen and (min-width:768px){ ... }

浏览器宽度在500px-768px之间时：@media only screen and (max-width:768px) and (min-width:500px){ ... }

浏览器宽度小于500px时：@media only screen and (max-width:500px){ ... }

移动端的工作已经越来越成为前端工作的重要内容，除了平常的项目开发，HTML 头部标签功能，特别是meta标签显得非常重要。

为移动设备添加 viewport：

content 参数：

width viewport 宽度(数值/device-width)

height viewport 高度(数值/device-height)

initial-scale 初始缩放比例

maximum-scale 最大缩放比例

minimum-scale 最小缩放比例

user-scalable 是否允许用户缩放(yes/no)

移动端的头部标签和meta：

<!DOCTYPE html>

<head>

</head>

padding、margin等

上左右下 3个值的时候

上右下左 4个值的时候

上下左右 2个值的时候

4个方向 1个值的时候

时间： 2024-10-12 13:43:03

HTML+css零碎小知识

HTML+css零碎小知识的相关文章

css + html 小知识总结

JS零碎小知识

css的小知识3

零碎小知识

熟悉某项目代码---零碎小知识总结

12个css小知识

12个你未必知道的CSS小知识

11个提高CSS技巧的小知识，你知道吗？

【前端词典】几个有益的 CSS 小知识