WEB第四天-CSDN博客

本文链接：https://blog.csdn.net/qq_41470296/article/details/99461547

WEB第四天

一、盒子模型

1.1 常用属性

border 盒子的边框

margin 外边距

padding 内边距

box-shadow 盒子的阴影，值： color left_position top_position height

div{
    box-shadow: skyblue 5px 5px 5px;
}

border-radius 设置边框的圆角（圆的半径）

#nav a{
    border: 1px solid red;
    border-radius: 5px;
    padding: 5px;
}

案例：圆形图片（用户头像）

.circle{
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

<div>
    <img class="circle" src="images/gyy6.jpg">
</div>

二、定位

在CSS样式中，定位的属性： position , 可选的值： static|absolute|relative|fixed

2.1 static 默认

按从上到下的文档流的方式展示标签的, 不会脱离文档流的。

样式中的top、left、right、bottom不能使用的。

2.2 absolute 绝对位置

脱离文档流，相对于root标签（body）指定位置显示的。

样式中可以使用top、left、right、bottom。如让标签在窗口的右侧且顶部显示：

div{
    position: absolute;
    right: 0px;
    top: 0px;
}

【注意】整个页面的布局需要给右侧div留出足够的空间，使用margin等相关属性。

2.3 relative 相对位置

不脱离文档流，相对于父标签显示的。

样式中可以使用top、left、right、bottom，设置相对于父标签的上、下、左和右之间的间距。

nav {
    height: 40px;
    margin-right: 100px;
}
nav>div{
    text-align: right;
    position: relative;
    right: 20px;
    top: 10px;
}

2.4 fixed 固定位置

脱离文档流，相对于浏览器的可见区域。一般用于悬浮菜单。

nav {
    width: 100%;
    height: 40px;
    /*border: 1px solid lightskyblue;*/
    background-color: white;
    position: fixed;
    top: 0px;
    right: 20px;
    left: 2px;
    padding-right: 10px;
    overflow: hidden;
    z-index: 1000;   /*  层索引（值大层在值小层的上面）  */
    border-bottom: 2px solid rgba(135, 206, 250, 0.5);
}


nav>div{
    text-align: right;
    position: relative;
    right: 50px;
    top: 10px;
}

【注意】悬浮菜单的背景需要设置，不然，浏览器在滚动时会透明的。当然，也需要在布局时留出显示空间。

<nav>
    <div>
         <a href="#python">新闻</a>
         <a href="#disen">军事</a>
         <a href="#img-container">教育</a>
         <a href="#top">娱乐</a>
    </div>
</nav>

三、锚点

在当前网页中，使用a标签的href连接带有id属性的标签的。

href的格式： #id

 <a href="#disen">disen</a>
 <div id="disen">
    <i>我喜欢上Disen老师的课，白天上课不睡觉，晚上作业准时完成，我是一位好学生！天天上课不迟到！</i>
</div>

四、内容溢出

4.1 块标签的content溢出

content溢出之后，可以使用overflow样式设置块标签的显示风格。

overflow可以设置的属性值：

hidden 隐藏溢出的内容
scroll 内容可以滚动显示
auto 自动调整成最合适的方式，默认为scroll
visible 完全显示，默认情况

div {
    height: 300px;
    overflow: auto;
}

4.2 文本内容的溢出

主要使用 text-overflow样式属性来设置溢出文本的显示风格，但必须与文本相关属性组合使用，如：

i{
    display: inline-block;
    width:  200px; 
    white-space: nowrap;  /* 单行显示 */
    overflow: hidden;
    text-overflow: ellipsis; /* 超出的文本以省略号的方式显示： ... */
}

五、bootstrap3/4 样式集

官网： bootcss.com

bootsrap定义一套完整的样式集，支持不同尺寸分辨率的设备，即是响应式的布局。bootsrap还包含基于jQuery的插件，还有不同的图标素材（css样式定义的）。在布局方面提出栅格系统设计思想，即将块标签的行总分大小相同的12个格子，且每个格子的大小是根据不同设备的大小计算的。

5.1 基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1">
    <title>初识bootstrap样式</title>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
	<h1>hi, Bootstrap</h1>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>