HTML和CSS网页布局

一点点晚风'

于 2024-12-25 19:06:02 发布

阅读量1k

点赞数 21

分类专栏：毕设前端文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/m0_56383660/article/details/144674629

版权

毕设同时被 2 个专栏收录

8 篇文章

订阅专栏

前端

4 篇文章

订阅专栏

HTML：https://www.runoob.com/html/html-tutorial.html
CSS：https://www.runoob.com/css/css-tutorial.html
Vue.js：https://www.runoob.com/vue2/vue-tutorial.html

一、HTML

div：块状元素（自动换行）
span：行内元素（一行显示，用br标签换行）
h1-h6：几级标题–自带边距，大小不同（块状元素）
i（icon）标签：可插入小标签（例如🔍）
strong：字体加粗（行内元素）
a：链接（行内元素）
img
video
input文本框
textarea
button按钮

二、CSS

（一）CSS布局思路

盒子模型
1.1 外边距margin 上右下左（顺时针）
1.2 内边距padding
1.3 边框border solid实线、dashed虚线
1.4 阴影 box-shadow（box-shadow: 0 0 10px -2px rgba(0,0,0,.5)）
1.5 边角 border-radius
1.6 内容
css换行：word-wrap: break-word

应用全局
*{
	box-sizing: border-box;
}

	1.边框
	<div style="width: 300px;height: 300px; border: 3px solid black;"><!--solid实线 、dashed虚线-->
    </div>
    2.外边距和内边距--可看图片右下角
    <div style="background-color: aquamarine; width: 100px; height: 100px; margin: 10px; padding: 100px;">    
    </div>
    3.阴影
    <div style="background-color: aquamarine; width: 100px; height: 100px; margin: 10px; padding: 100px;
        box-shadow: 0 0 10px -2px rgba(0,0,0,.5)">
    </div>
    4.边角
    <div style="width: 300px;height: 300px; border: 3px solid black; border-radius: 20px;"><!--solid实线 、dashed虚线-->
    </div>
    5.内容
    css换行<div style="word-wrap: break-word"></div>

在这里插入图片描述

Flex弹性布局 https://www.runoob.com/w3cnote/flex-grammar.html
2.1 flex-direction：项目排列方向默认row水平方向、column垂直方向
2.2 flex-wrap：warp控制换行，默认nowrap不换行、wrap换行
2.3 flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
2.4 justify-content属性定义了项目在主轴上的对齐方式。

 flex-start（默认值）：左对齐
 flex-end：右对齐
 center： 居中
 space-between：两端对齐，项目之间的间隔都相等。
 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

2.5 align-items属性定义项目在交叉轴上如何对齐。

 flex-start：交叉轴的起点对齐。
 flex-end：交叉轴的终点对齐。
 center：交叉轴的中点对齐。
 baseline: 项目的第一行文字的基线对齐。
 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

2.6 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

 flex-start：与交叉轴的起点对齐。
 flex-end：与交叉轴的终点对齐。
 center：与交叉轴的中点对齐。
 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
 stretch（默认值）：轴线占满整个交叉轴。

<div style="display: flex; width: 70%; margin: 30px auto">
        <div style="flex: 1; display: flex; align-items: flex-end" >
            <div style="width: 100px; font-size: 30px;color: #00b51d">豆瓣网</div>
            <div style="flex: 1 ; padding-left: 10px"><input placeholder="请输入音乐、电影" type="text" style="border: 1px solid #cccccc; padding: 10px;outline: none; width: 300px; border-radius: 5px"></div>
        </div>
        <div style="flex: 1; display: flex; font-size: 20px; justify-content: flex-end">
            <div style="padding: 0 10px ; color: #00b51d">读书</div>
            <div style="padding: 0 10px; color: crimson">音乐</div>
            <div style="padding: 0 10px; color: cornflowerblue">电影</div>
            <div style="padding: 0 10px; color: cornflowerblue">电影</div>
            <div style="padding: 0 10px; color: cornflowerblue">电影</div>
            <div style="padding: 0 10px; color: cornflowerblue">电影</div>
        </div>
    </div>

（二）CSS布局元素

宽度 width
1.1 固定宽度百分比宽度
1.2 最大宽度
1.3 最小宽度
1.4 水平居中 margin:auto
高度 height
2.1 固定高度（必须）
2.2 最大高度
2.3 最小高度
2.4 行高对齐 line-height
字体font
3.1 颜色 color 十六进制、RGB、英文
3.2 大小 font-size
3.3 粗细 font-weight:bold（bold变粗、normal正常）
背景background
4.1 颜色 background-color
4.2 图片 background-img:url(…)
定位position
5.1 absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
5.2 relate 生成相对定位的元素，相对于其正常位置进行定位（上下移动行内元素最简单的方式）
5.3 fixed 生成固定定位的元素，相对于浏览器窗口进行定位
overflow:hidden scroll