整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
/*总体的样式*/
<style>
/*盒子样式*/
#box{
width: 350px; //宽
height: 450px; //高
border: 1px solid black; //边框
border-radius: 10px; //边框弧度
font-family: 黑体; //字体
letter-spacing:8px; //段间距
word-spacing: 10px; //字间距
line-height: 40px; //行高
font-size: 18px; //字大小
padding: 20px; //内边框
}
/*给'注册'赋予样式*/
.register{
width:280px ; //宽
height: 50px; //高
background-color: skyblue; //背景颜色
border-radius: 10px; //边框弧度
}
/*将所有边框都改变*/
*{
border-radius: 5px; 边框弧度
}
/*使用class选择器，赋予number宽高和边框*/
.number{
width: 185px; //宽
height: 27px; //高
border-width: 1px; //边框宽度
}
/*id选择器*/
#two{
width: 55px; //宽
border-width: 1px; 边框宽度
}
/*id选择器*/
#phone{
width: 103px; //宽
}
/*class 选择器*/
.boxs{
zoom: 75%; //清除浮动
color: darkgray; //颜色
}
/*class选择器*/
.box_a{
width: 50px; //宽
height: 50px; //高
background-image: url("../image/04.jpg "); //背景图片
background-repeat: no-repeat; // 是否平铺
background-size: 50px 25px; //背景尺寸
position: relative; //定位 相对定位
left: 310px; //定位后左移
bottom: 32px; //定位后下移
}
</style>
</head>
<body>
<div id="box">
<h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
<label for="name">用户名</label>
<input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
<label for="phone">手机号</label>
<select name="" id="two" class="number">
<optgroup>
<option style="" class="">+86</option>
</optgroup>
</select>
<input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
<label for="mima">密 码</label>
<input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
<label for="mima">验证码</label>
<input type="password" placeholder="请输入验证码" id="is" class="number">
<div class="box_a"></div>
<div class="boxs">
<input type="radio" id="" class="accept">阅读并接受协议<br>
</div>
<input type="submit" value="注册" class="register" >
</form>
</div>
</body>
</html>
在这里插入图片描述*CSS基础-06-元素大小（设置元素尺寸height/width、最大值max-height max-width、最小值min-height min-width、设置行间距 line-height）**
在Web前端开发中，对元素大小的精确控制是构建美观且布局合理的网页界面的关键。CSS提供了丰富的属性来帮助我们实现这一目标，包括设置元素的宽高（`height`/`width`）、定义最大与最小尺寸（`max-height`/`max-width`和`min-height`/`min-width`），以及调整文本行间距（`line-height`）。本文将深入探讨这些属性的用法、应用场景及示例代码，助您掌握元素大小调整的核心技巧。
**一、设置元素尺寸：height与width**
**1.1 定义元素高度（height）**
**定义方式：**
```css
element {
height: value;
}
```
其中，`element`代表目标元素的选择器，`value`可以是以下几种类型：
- **绝对单位**：如像素（`px`）、厘米（`cm`）、毫米（`mm`）、英寸（`in`）、点（`pt`）等。
- **相对单位**：如百分比（`%`）、视口宽度（`vw`）、视口高度（`vh`）、字体大小（`em`）等。
- **关键字**：如`auto`（默认值，由内容决定高度）、`initial`（恢复初始值）、`inherit`（继承父元素的值）。
**示例代码：**
```html
<div class="box">
<p>这是一个高度为200px的盒子。</p>
</div>
<style>
.box {
background-color: #f8f9fa;
height: 200px; /* 设置固定高度 */
width: 300px; /* 设置固定宽度，便于观察效果 */
}
</style>
```
**1.2 定义元素宽度（width）**
**定义方式：**
```css
element {
width: value;
}
```
`width`属性的值同样支持绝对单位、相对单位及关键字，其使用方法和`height`相同。
**示例代码：**
```html
<div class="content">
<p>这是一个宽度为80%的自适应容器。</p>
</div>
<style>
.content {
background-color: #f8f9fa;
width: 80%; /* 设置宽度为父元素的80% */
margin: 0 auto; /* 居中显示 */
}
</style>
```
**二、设定元素最大/最小尺寸：max-height/max-width与min-height/min-width**
**2.1 最大高度/宽度（max-height/max-width）**
**定义方式：**
```css
element {
max-height: value;
max-width: value;
}
```
这两个属性用于限制元素的最大尺寸，当元素的实际尺寸超过设定值时，会自动调整到指定的最大值。值的类型与`height`和`width`相同。
**示例代码：**
```html
<div class="image-container">
<img src="large-image.jpg" alt="Large Image">
</div>
<style>
.image-container {
max-width: 100%; /* 图片最大宽度不超过父元素宽度 */
max-height: 500px; /* 图片最大高度不超过500px */
overflow: hidden; /* 隐藏超出部分 */
}
</style>
```
**2.2 最小高度/宽度（min-height/min-width）**
**定义方式：**
```css
element {
min-height: value;
min-width: value;
}
```
`min-height`和`min-width`用于确保元素的最小尺寸，当元素的实际尺寸小于设定值时，会强制扩展到指定的最小值。值的类型与`height`和`width`相同。
**示例代码：**
```html
<div class="sidebar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<!-- 更多链接 -->
</ul>
</div>
<style>
.sidebar {
background-color: #f8f9fa;
min-width: 200px; /* 侧边栏最小宽度为200px */
}
</style>
```
**三、设置行间距：line-height**
**3.1 定义行间距（line-height）**
**定义方式：**
```css
element {
line-height: value;
}
```
`line-height`属性用于设置元素内文本行之间的垂直间距。值的类型包括：
- **数值**：如`1.5`、`2`等，表示相对于当前字体大小的倍数。
- **绝对单位**：如像素（`px`）、厘米（`cm`）等。
- **百分比**：相对于元素本身的字体大小。
- **关键字**：如`normal`（默认值，浏览器默认行间距）、`initial`、`inherit`。
**示例代码：**
```html
<p class="loose-text">这是一段行间距为1.5倍的文本。</p>
<style>
.loose-text {
font-size: 16px;
line-height: 1.5; /* 设置行间距为字体大小的1.5倍 */
}
</style>
```
**四、实战应用与注意事项**
**4.1 响应式设计**
结合`max-height`/`max-width`、`min-height`/`min-width`与媒体查询（`@media`），可以轻松实现响应式布局，确保元素在不同屏幕尺寸下保持合适的大小。
**示例代码：**
```css
@media (max-width: 768px) {
.content {
width: 100%; /* 小于768px时，宽度占满屏幕 */
}
}
@media (min-width: 768px) and (max-width: 1200px) {
.content {
width: 75%; /* 768px至1200px之间，宽度为75% */
}
}
@media (min-width: 1200px) {
.content {
width: 50%; /* 大于1200px时，宽度为50% */
}
}
```
**4.2 注意事项**
- **`height`与`width`设置为`auto`时，元素的尺寸通常由其内容决定。对于块级元素，宽度默认为`auto`，高度则受内部内容影响；对于内联元素，宽度和高度均受内容影响。**
- **使用百分比单位时，`height`的百分比基于包含块的高度，而`width`的百分比基于包含块的宽度。**
- **在设置`min-height`时，确保包含块（父元素）具有足够的高度或自身元素具有足够的内容，否则可能无法达到预期效果。**
- **使用`line-height`时，注意与其他文本相关的属性（如`font-size`、`vertical-align`等）的配合，以保持良好的排版效果。**
通过熟练掌握上述CSS属性，您将能精准地控制网页中元素的大小，实现复杂多样的布局效果。不断实践并结合实际项目需求，您的前端开发技能将更上一层楼。
击右上方红色按钮关注“web秀”，让你真正秀起来
作为程序员的我们，书写代码也需要大量的技巧。一份良好的代码能让人耳目一新，让人容易理解，同时也让自己成就感满满。因此，在这里简单的整理一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。
CSS实用技巧第一讲：文字处理
本小结主要是围绕css对文字处理的技巧，有兴趣的小伙伴可以收藏一下。
CSS最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且实现起来也是非常的简单。
如下：
p{
text-align: center;
text-align: left;
text-align: right;
}
但是两端对齐你有用过吗？
只需要添加text-align-last:justify样式即可。请看示例：
<div class="justify-text"> <div class="li">账号</div> <div class="li">密码</div> <div class="li">电子邮件</div> </div>
scss样式
.justify-text {
.li {
padding: 0 20px;
margin-top: 10px;
width: 100px;
background-color: #f13f84;
line-height: 40px;
text-align-last: justify;
color: #fff;
list-style: none;
&:first-child {
margin-top: 0;
}
}
}
CSS实用技巧第一讲：文字处理
现代书本上的文字都是从左到右的顺序排列，但是古时候不同，文字都是从右至左排列的，现在在很多古籍、牌坊、石碑等上面依旧可以看到从右至左的文字。
css也可以调整文本排版方向，是通过什么属性控制的呢？
writing-mode 属性定义了文本在水平或垂直方向上如何排布。
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
下面看具体示例：
<div class="bruce flex-ct-x"> <div class="vertical-text"> <h3>诗经</h3> <p> 死生契阔，<br> 与子成说。<br> 执子之手，<br> 与子偕老。 </p> </div> </div>
scss样式
.vertical-text {
writing-mode: vertical-rl; // 文字排版方向
h3 {
padding-left: 10px;
font-weight: bold;
font-size: 18px;
color: #d60f5c;
}
p {
line-height: 30px; // 行间距
letter-spacing: 7px; // 文字间距
color: #ee1166;
}
}
CSS实用技巧第一讲：文字处理
文本从右至左排列
<div class="reverse-text"> 红豆生南国<br/> 春来发几枝<br/> 愿君多采撷<br/> 此物最相思 </div>
scss样式
.reverse-text {
font-weight: bold;
font-size: 30px;
color: #f13f84;
width: 200px;
letter-spacing: -70px; // letter-spacing最少是font-size的2倍
}
CSS实用技巧第一讲：文字处理
文本溢出处理不管是PC或者是H5，都是非常常见的，非详情页面都会经常用到。
文本溢出处理分为：单行文字溢出 和 多行文字溢出。下面看看具体示例：
单行文字溢出
<div class="ellipsis">昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。知否，知否，应是绿肥红瘦。</div>
scss样式
.ellipsis {
width: 200px;
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出修饰 ellipsis省略号
white-space: nowrap; // 文本不会换行
}
CSS实用技巧第一讲：文字处理
多行文字溢出
<div class="ellipsis">寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急！雁过也，正伤心，却是旧时相识。 满地黄花堆积，憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑！梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得！</div>
scss样式
.ellipsis {
width: 400px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
CSS实用技巧第一讲：文字处理
注意
使用文本溢出处理时，容器一定要定义宽度。
多行文字溢出，scss样式添加注释autoprefixer: off并不是为了说明什么，而是，在webpack打包编译时，如果没有这个注释，-webkit-box-orient: vertical会被忽略掉。
在浏览器中，当你选择文本想要copy时，是不是会发现选择文本会有背景色和文字颜色呢？其实它是可以通过css定义的。
使用::selection自定义文本选择颜色
<div class="select-color"> <p>红豆生南国，</p> <p class="special">春来发几枝。</p> <p>愿君多采撷，</p> <p class="special">此物最相思。</p> </div>
scss样式
// 全局文本选择样式
::selection {
background-color: #f13f84;
color: #fff;
}
.select-color {
line-height: 30px;
font-weight: bold;
font-size: 30px;
color: #d60f5c;
}
// 具体某个选择器下 文本选择样式
.special::selection {
background-color: #00b7a3;
}
CSS实用技巧第一讲：文字处理
有空把CSS3及其选择器和伪元素伪类等知识点复习一遍，温故而知新。多使用Chrome的DevTools来调试CSS，提示式的填值能发现很多有趣的属性。多尝试不同的方式实现相同功能，多实践。项目中多试用CSS的新特性，不要总是被低版本浏览器束缚着，这样也一直难以进步。在使用JS完成一个简单的效果前先想想能不能用纯CSS来完成。这样你的CSS技能就能得到稳步提升。
最后谢谢大家的支持。
*请认真填写需求信息，我们会在24小时内与您取得联系。
