学习前端的第一周

最新推荐文章于 2024-07-25 11:52:08 发布

羊吃毛

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量81

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_41400042/article/details/110285102

版权

css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

标签

1 篇文章 0 订阅

订阅专栏

前言

开始系统学习前端第一周，在博客上记录自己的学习过程，问题，希望会对以后的学习有帮助。本文仅供参考，如有错误，还请指出。

一、标签元素

标签元素有很多种，但是最常用的还是<div>,<span>,<h1>~<h6>，<p>,<em>,<i>…其中又分为行内元素、块状元素和行内块状元素三种。这三种元素可以互相转换，但是我一直都对这三种有一定的模糊，分不清他们的区别。借此分清这三种元素的关系。

行内元素

一个行内元素只占据它标签元素大小，但是不能设定宽高，而且对margin的设置只有左右的方向上有效，上下的方向上无效。而设置padding则上下左右都有效，会撑大空间。所有行内元素都在一行上显示。不会自动换行。
常见的行内元素有<span>,<a>,<b>,<del>,<em>,<sub>,<sup>…

块元素

块元素独占一行，可以设置宽高，如果没有设置宽高，则宽和父级元素一样，高度会被内容撑开。可以自动换行。
常见的块元素有<div>,<h1>~<h6>,<p>,<table>,<ul>,<ol>,<li>…

行内块元素

行内块元素可以设置宽高，不独占一行，可以在一行上显示，会自动换行。
常见的行内块元素有<img>,<input>,<select>,<button>,<lable>…

三种类型的转换

三种元素可以相互转换，用display 属性转换。
转换为块元素：display:block;
转换为行元素：display:inline;
转换为行内块元素：display:inline-block;

若设置行内元素 float:left/right,则该行内元素转换为块级元素，且具有浮动性
若行内元素进行定位，position:absolute或position:fixed，则该行内元素也会转换为块级元素。

二、表格元素与表单元素

一、表格元素

表格元素以<table>开头</table>结尾

1、table元素是定义一个表格
2、caption元素定义表格标题（不常用）
3、th元素定义表格中的表头单元格
4、tr元素定义表格中的行
5、td元素定义表格中的单元
在表格元素中，最常用的几个元素就是table，th，tr，td元素。

表格元素的展示：

<table>
        <caption>这是一个表格</caption>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>第一行</td>
            <td>第一行</td>
            <td>第一行</td>
        </tr>
        <tr>
            <td>第二行</td>
            <td>第二行</td>
            <td>第二行</td>
        </tr>
    </table>

在这里插入图片描述
可能会有人不觉得这是一个表格，是因为在表格中我还没有设置border属性（边框）
想让它变得好看，就要添加几个css样式。下面介绍一下表格的几个属性。

border：在表格中就是加边框的存在，一般给个1的边框就行了。
cellspacing：规定单元格之间的空白（即表格单元格间距）。
cellpadding：规定单元边沿与其内容之间的空白。

下面为加了样式的表格

<table border="1" cellpadding="20" cellspacing="0">
        <caption>这是一个表格</caption>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>第一行</td>
            <td>第一行</td>
            <td>第一行</td>
        </tr>
        <tr>
            <td>第二行</td>
            <td>第二行</td>
            <td>第二行</td>
        </tr>
    </table>

在这里插入图片描述

二、表单元素

说一下我认为最重要的表单元素 input

input：input元素是我认为最重要的表单元素之一，它的格式为<input type="text" name="" id="">。
在它的type属性中，规定要显示的 <input> 元素的类型。type的属性值最常用的有text（默认）、button（按钮）、radio （单选圆形按钮）、checkbox（多选方块按钮）、password（密码）…
因为有很多地方都要用到表单元素，input的功能强大性就体现出来。因为type属性很多，它可以自由变换成想要的格式。但是也有各自的属性值。比如radio单选按钮只有在给name一样的值时，它才能实现单选。不然还是多选。又比如button按钮，它的宽度是由value中的文本撑开的，如果没有文本就会缩成很小的一个方块。

三、CSS样式

一、 border属性

border元素不只是能加边框那么简单。它还能拿来做三角形，梯形。
因为一个元素有四条边，它的边很大时，两个方向重合的边会被挤压，变成斜成45度角的边。代码展示：

   <style>
        .box {
            margin: 20px auto;
            width: 20px;
            height: 20px;
            background-color: blue;
            border-top: 50px solid red;
            border-right: 50px solid yellow;
            border-bottom: 50px solid green;
            border-left: 50px solid pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

在这里插入图片描述
可以看到，边框由4个梯形组成。而这是当我们的box有宽度有高度造成的。当没有宽度时，就会变成4个三角形。

在这里插入图片描述
而我们此时隐藏其他三个边框的颜色，就可以做成一个三角形。

 <style>
        .box {
            margin: 20px auto;
            width: 0px;
            height: 0px;
            border-top: 50px solid red;
            border-right: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

在这里插入图片描述
所以，这就是border的妙用。当需要作出一个三角形，梯形时，可以用边框属性来完成。

二丶box-shadow属性

box-shadow有六个属性值，分别为h-shadow（水平阴影的位置），v-shadow（垂直阴影的位置），blur（模糊距离），spread（阴影的大小），color（阴影颜色），inset（从外层的阴影（开始时）改变阴影内侧阴影）。
虽然它有这么多的属性值，但是只有水平阴影位置和垂直阴影位置是必须要写的。以前的我一般只写4个值，直到有一次有一个效果没有实现，我开始写5个值：box-shadow: h-shadow（水平阴影的位置）v-shadow（垂直阴影的位置）blur（模糊距离），spread（阴影的大小），color（阴影颜色）;。
特别强调：

boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

因为这个特点，我们可以给一个元素加很多阴影。在写完一个之后，用逗号隔开，即可书写下一个阴影。

羊吃毛

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习前端的第一周

前言系统学习前端第一周，以前在学校自学过一段时间，现在又开始从头学习，在老师的指导下开始在博客上记录自己的学习过程，希望会对以后的学习有帮助。本文仅供参考，如有错误，还请指出。一，标签元素标签元素有很多种，但是最常用的还是<div>,<span>,<h1>~<h6>，<p>,<em>,<i>…其中又分为行内元素、块状元素和行内块状元素三种。这三种元素可以互相转换，但是我一直都对这三种有一定的模糊，分不清他们的区别。借此
复制链接

扫一扫

专栏目录