笔记 || CSS

最新推荐文章于 2024-05-17 18:05:02 发布

bekote

最新推荐文章于 2024-05-17 18:05:02 发布

阅读量93

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/bekote/article/details/107630041

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

# CSS 盒子模型(Box Model)

当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度，完整大小的元素，还必须添加内边距，边框和边距

height、width：Content的高度和宽度

浏览器的兼容性问题

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

# 边框-简写属性

border: border-width border-style(required) border-color

border:5px solid red;

# CSS 轮廓（outline）

# CSS Display - 块和内联元素

！假如要设置一些元素在同一行，要将这些元素都设置为内联元素，而不是设置容器行为内联元素

# CSS Position(定位)

h2.pos_left
{
	position:relative;
	left:-20px; /*从元素的原始左侧位置减去 20 像素*/
}
h2.pos_right
{
	position:relative;
	left:20px; /*从元素的原始左侧位置加上 20 像素*/
}

！移动相对定位元素，但它原本所占的空间不会改变

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
h2.pos_top
{
	position:relative;
	top:-50px;
}
</style>
</head>
<body>
<h2>这是一个没有定位的标题</h2>
<h2 class="pos_top">这个标题是根据其正常位置向上移动</h2>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>
</body>
</html>

position为sticky，top为0 时窗口滚动时表现为relative定位，即元素随着上下移动，当元素向上移动到达顶部时，表现为fixed定位，再向上滚动窗口元素固定再顶部不动

效果（菜鸟教程）https://www.runoob.com/try/try.php?filename=trycss_position_sticky

more：菜鸟教程 https://www.runoob.com/css/css-positioning.html

# CSS 布局 - Overflow

# 清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性，clear 属性指定元素两侧不能出现浮动元素。

# CSS 布局 - 水平 & 垂直对齐

# 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto

如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用

# 文本在元素内居中对齐，可以使用 text-align: center

# 垂直居中对齐

1、padding-top

2、令容器height = line-height

3、子元素样式

/*子元素左上角顶点放在容器中心位置*/
position: absolute;
top: 50%;
left: 50%;
/*向左边和上边移动子元素高度和宽度的一半*/
transform: translate(-50%, -50%);
/*-ms-transform：  IE 9 */
/*-webkit-transform：  Safari and Chrome */

bekote

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
笔记 || CSS

#CSS 盒子模型(Box Model)当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度，完整大小的元素，还必须添加内边距，边框和边距height、width：Content的高度和宽度浏览器的兼容性问题一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，.
复制链接

扫一扫