css基本样式的使用

1、高度和宽度

html 复制代码
.c1{
    height: 300px;
    width: 500px;
}

注意事项:

  • 宽度,支持百分比
  • 行内标签,默认无效
  • 块级标签,默认有效(即使右侧空白,也不给你占用)

块级和行内标签

css样式 标签: display: inline-block

加上这个标签后行内标签具有了块级标签的特性,可以设置宽高了

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        input[type='text']{
            border: 1px solid red;
        }
        .c1{
            display: inline-block;
            height: 100px;
            width: 300px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
     <span class="c1">安娜</span>
     <span class="c1">安娜</span>
</body>
</html>
  • 块级和行内标签的转换
html 复制代码
<span style="display: block;">安娜</span>
<div style="display: inline;">安娜</div>

使用这个标签后行内标签具有块级标签的特性,块级标签的属性具有行内标签的属性

2、字体设置

  • 颜色: 出来可以使用英文还可以使用rgb值,如:#00FF7F
  • 大小
  • 加粗
  • 字体格式:
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        .c1{
            color: red;
            font-size: 58px;
            font-weight: 400;
            font-family: Microsoft Yahei;
        }
    </style>
</head>
<body>
     <div class="c1">安娜</div>
     <div style="display: inline;">安娜</div>
</body>
</html>

3、字体对齐方式

text-align: center 水平方向居中

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        .c1{
            color: #00FF7F;
            height: 100px;
            width: 300px;
            border: 2px solid red;
            text-align: center;
        }
    </style>
</head>
<body>
     <div class="c1">安娜</div>
     <div style="display: inline;">安娜</div>
</body>
</html>

line-height:100px 垂直方向居中,指定高度

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        .c1{
            color: #00FF7F;
            height: 100px;
            width: 300px;
            border: 2px solid red;
            text-align: center;
            line-height:100px;
        }
    </style>
</head>
<body>
     <div class="c1">安娜</div>
     <div style="display: inline;">安娜</div>
</body>
</html>

4、浮动

本来span标签两个是挨在一起的,使用向右浮动,就会一个显示在左边一个在右边

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
     <span>安娜</span>
     <span style="float:right">伏伦斯基</span>
</body>
</html>

div 默认是块级标签,如果浮动起来了就不一样了。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        .c1{
            float: left;
            height: 100px;
            width: 300px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
     <div>
         <div class="c1"></div>
         <div class="c1"></div>
         <div class="c1"></div>
         <div class="c1"></div>
     </div>
</body>
</html>

浮动起来后,自己有多宽就占多宽。

如果让标签浮动起来后,就会脱离文档流。会使得父级div的样式无法显示,需要加上

html 复制代码
<body>
     <div style="background-color: blue">
         <div class="c1"></div>
         <div class="c1"></div>
         <div class="c1"></div>
         <div class="c1"></div>
         <div style="clear: both;"></div>
     </div>
</body>

5、内边距

距离自己标签内部的距离

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        .outer{
            height: 300px;
            width: 300px;
            border: 2px solid red;
            padding-top: 20px;
            padding-left: 20px;
        }
    </style>
</head>
<body>
     <div class="outer">
         <div>你的眼里都是光</div>
         <div>真是那样吗</div>
     </div>
</body>
</html>

如果是上下左右的内边距都是20px ,可以按下面的方法写

html 复制代码
 padding: 20px;

按上右下左的顺时针方向的内边距大小

html 复制代码
padding: 40px 30px 20px 10px;

6、外边距

当前标签与其他标签的距离

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>

         <div style="background-color:red; height:100px">你的眼里都是光</div>
         <div style="border: 2px solid blue; margin-top:30px">真是那样吗</div>
</body>
</html>

7、其他注意点

  • body标签,默认有一个边距,造成页面四边都有白色间隙,如何去除呢?
html 复制代码
body {
    margin: 0
}
  • 内容居中
    文本居中,文本会在这个区域中居中。
html 复制代码
<div style="width: 200px; text-align: center;">安娜</div>

区域居中,自己要有宽度+ margin- left:auto;margin-right:auto

html 复制代码
. container {
    width: 980px;
    margin: 0 auto;
}
<div class=" container" >adfasdf</div>
相关推荐
web守墓人42 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
Liudef066 小时前
儿童趣味记忆配对游戏
css·游戏·css3
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维