<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style></style>
</head>
<body>
<!--
轮廓,阴影,圆角
outline用来设置元素的轮廓线,用法和border一样,但轮廓不会影响布局
box-shadow用来设置元素的阴影效果,阴影不会影响布局
第一个值 水平偏移量 正值向右移动,负值向左移动
第二个值 垂直偏移量 正值向下移动,负值向上移动
第三个值 阴影的模糊半径
第四个值 阴影的颜色
border-radius用来设置圆角,值为元素的圆角半径
-->
<!--
浮动
float使元素向其父元素的左侧或右侧移动
可选值:
none,元素不浮动
left:元素向左浮动
right:元素向右浮动
元素设置浮动之后,水平布局的等式便不需要强制成立,会完全从文档流中脱离,不再占用文档流中的位置
元素下面还在文档流中的元素会自动向上移动
如果浮动元素的上面是一个没有浮动的块元素,则浮动元素无法上移
浮动元素无法超过上方的浮动元素
可以通过浮动制作水平方向上的布局
脱离文档流后的特点
块元素不再独占页面第一行,宽度和高度默认都被内容撑开
行内元素脱离文档流之后会变成块元素,特点和块元素一样
脱离文档流之后,不需要再区分行内元素和块元素
-->
</body>
</html>
HTML,css基础12
最新推荐文章于 2024-09-30 08:51:48 发布
本文介绍了HTML中的轮廓(outline)、CSS的阴影(box-shadow)和浮动(float)概念。轮廓不会影响布局,box-shadow用于设置元素阴影,而浮动常用于创建水平布局。理解这些基础概念对于前端开发至关重要。
摘要由CSDN通过智能技术生成