HTML和CSS

最新推荐文章于 2024-10-20 14:13:12 发布

不高山mou

最新推荐文章于 2024-10-20 14:13:12 发布

阅读量160

点赞数

分类专栏： HTML CSS 文章标签： css html

本文链接：https://blog.csdn.net/c1348208475/article/details/113548868

版权

HTML CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML和CSS

1.盒子模型
在这里插入图片描述

//border:边框
/*样式：solid:实线 dotted:点虚线 dashed:虚线 double:双线（默认：无）
*颜色:boder-color(默认：黑色)
*宽度：四个值：上 右 下 左（顺时针）
*三个值：上 左右 下
*两个值：上下 左右
*一个值：
*border-top-width:10px;
*/
boder-color:orange red yellow green;
boder-style:solid;
boder:10px orange solid;//简写
boder-right:none;

//内边距padding
//只有边距的属性；背景颜色延申到边距，无颜色属性
padding-top:5px
padding:15px 12px;
//.inner{width:100% heught:100% color:yellow;}子盒子

//外边距
//不会影响盒子可见框，会影响位置。盒子之间位置的距离
margin:100px; 
//兄弟元素：margin存在重叠现象，边距取最大值；一正一负取和；
//父子元素：子元素不相对于父元素的位置，而相对于屏幕。子元素影响父元素外边距，

//整体应用
.outer{
	width:400px;
	height:300px;
	border:10px red solid;
	box-sizing:border-box;
	/*盒子大小:设置盒子大小的方式：
	*content-box:width：为内容区大小（默认值）
	*border-box：为盒子大小，包括padding等，占据内容区变小
	*/
}
.inner{
	width:200px;
	height:200px;
	background-color:green;
	overflow:hidden;
	//visible:裁剪，scroll:滚动条，auto：自动生成滚动条
	overflow-x:hidden;
}
//从内到外：width，padding，border，margin

/*outline:设置元素的轮廓，不会影响可见框的大小，只是在元素外加边框，覆盖其他元素。
*和border语法相同
*/

//阴影
box-shadow:20px 0px 50px rgba（0.0.0,.3）
//水平右位移，垂直下位移 阴影的模糊半径 阴影的颜色

//圆角
border-top-left-radius:50px;
border-bottom-left-radius:50px 100px;//水平 竖直
border-radius:50px;
/*四个值：左上 右上 右下 左下（顺时针）
*三：左上 右上左下 右下
*两个：左上右下 右上左下
*/
border-radius:50%;//表示圆

4.行内元素的盒模型
行内标签也有盒模型

//不支持宽高，可以设置margin，border，padding，垂直方向不会影响。
<span class="s1">我是span</span>
.s1{
/*display:元素的类型
*	inline:行内元素	block:块元素
*	inline-block:行内块，可设置宽高但不独占一行
*	table：将元素设置表格
*	none：元素不在页面显示
*visibility：元素的显示状态
*	visible:正常显示
*	hidden：不显示占位置
*/
	display:inline;
	width:200px;
	height:200px;
}

//去除浏览器默认样式
*{
	margin:0;
	padding:0;
}
/*引入重置默认样式css文件
*reset.css:去除全部
*normize.css.：默认样式统一
*/

2.练习
在这里插入图片描述
4.浮动
设置水平方式，浮动元素不占据一行文档流
全都浮动：向左（右）依次浮动
不浮动在前：浮动元素无法上移
不浮动在后：浮动元素浮动在不浮动元素后
浮动元素不会超过上一个浮动元素的位置
浮动不会覆盖文字
在这里插入图片描述

float:left;//right
//文字在父元素中垂直分布
line-height:12px//=父元素的高度
//文字水平分布
padding:0 40px;//上下 左右

//浮动不分块和行内，宽高任意设置，背景颜色和内容大小一致

5.简单的网页布局

<head></head>
<main>
	<nav></nav>
	<article></article>
	<aside></aside>
</main>
<footer></footer>

header,main,footer{
	width:1000px;
	margin:0 aotu;
}
header{
	height:150px;
	backgroundcolor:green;
}
main{
	height:750px;
	background-color:yellow;
	margin:10px aotu;
}
footer{
	height:150px;
	backgroundcolor:tomato;
}
nav{
	height:100%;
	width:200px;
	background-color:yellow;
	float:left;
}