HTML+CSS_html marge-优快云博客

本文链接：https://blog.youkuaiyun.com/u010247166/article/details/88045583

HTML

1.常用表单元素

在这里插入图片描述

<form action="<%=request.getContextPath() %>/testS" method="post">

    文本:
    <input type="text" name="itext">
    <br><br>

    密码:
    <input type="password" name="ipassword">
    <br><br>

    单选:
    <input type="radio" name="r1" value="1">男
    <input type="radio" name="r1" value="2">女
    <br><br>

    多选:
    <input type="checkbox" name="c1" value="a1" checked="checked">篮球
    <input type="checkbox" name="c2" value="a2">足球
    <br><br>

    下拉单选框：
    <select name="select" id="select">
        <option value="01">北京</option>
        <option value="02">上海</option>
        <option value="03">广州</option>
    </select>
    <br><br>

    多行文本：
    <textarea rows="20" cols="60" name="duohang"></textarea>
    <br><br>

    文件上传:<input type="file" name="ifile"><br>
    <br><br>

    <input type="submit" name="tijiao" value="提交"/>

</form>

2.各个元素参考

W3school
在这里插入图片描述

CSS

参考网址
 参考网址1
参考网址2

1.css导入方式

在这里插入图片描述

2.选择器

2.1基本选择器

在这里插入图片描述

2.2扩展选择器

在这里插入图片描述

2.3复合选择器

在这里插入图片描述

3.块级元素与行内元素

在这里插入图片描述

下面这些都是在标准流中的属性

块级元素：
1).霸占一行，不能与其他任何元素并列
2).能接受宽、高
3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽

4).如果不设置高度，则高度和子类的总和一样
行内元素：
1).与其他元素并排
2).不能设置宽、高。默认的宽度就是文字的宽度

3).marge等上下间距不起作用
在HTML中，标签分为：文本级和容器级；
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd
温馨小提示：
(1).容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。
(2).p标签是一个文本级标签。p里面只能放文字、图片、表单元素。其他的一律不能放。
(3).定义列表是一个组标签，不过比较复杂，出现了三个标签：
dl表示definition list 定义列表
dt表示definition title 定义标题
dd表示definition description 定义表述词儿
dt、dd只能在dl里面；dl里面只能有dt、dd

css的分类和HTML的分类很像，就p不一样
所有的文本级标签都是行内元素，除了p；p是个文本级，但是是个块级元素；
所有的容器级标签都是块级元素

4.盒模型

在这里插入图片描述

DIV：如果没有指定width，那么width大小同父类一样，扩展到整个页面，如果指定了，则按指定的显示。
一个div，如果没有指定大小，它的边框和边距都是透明的，大小由里面的内容决定！！！，不过每个标签都有默认的样式(标准流)，比如div的宽度默认是和浏览器宽带一样

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

4.1display

    <H1>常规显示</H1>
    <div>BOX1</div>
    <div>BOX2</div>
    <div>BOX3</div>
    <span>BOX1</span>
    <span>BOX2</span>
    <span>BOX3</span>
    <div>BOX4</div>

    <H1>设置display</H1>
    <!--按内联显示-->
    <div style="display: inline">BOX1</div>
    <div style="display: inline">BOX2</div>
    <div style="display: inline">BOX3</div>
    <!--按块显示-->
    <span style="display: block">BOX1</span>
    <span style="display: block">BOX2</span>
    <span style="display: block">BOX3</span>
    <!--不显示-->
    <div style="display: none">BOX4</div>

在这里插入图片描述

4.2行内元素之间水平margin 和块元素之间垂直margin

在这里插入图片描述

4.3 数字属性表示

在这里插入图片描述

4.4元素的高度和宽度(参考盒模型图)

元素框的总宽度 = 元素的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度
元素框的总高度 = 元素的height + padding的上下边距的值 + margin的上下边距的值＋border的上下宽度

4.5元素之间的距离

1.水平距离

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span{
            border-color: aqua;
            border-style: solid;
            border-width: 20px;
            width: 100px;
        }
        #d1{
            background: brown;
            margin: 30px;
            padding: 20px;
        }
        #d2{
            background: blue;
            margin: 20px;
            padding: 30px;
        }
    </style>
</head>
<body>
<span id="d1">d111111111111111111111111111</span>
<span id="d2">d222222222222222222222222222</span>
</body>

在这里插入图片描述

有上图可知：
1.两个元素总宽度= div1元素框的总宽度 + div2元素框的总宽度
2.两个元素总宽度的大小随里面文字而变化

2.垂直距离

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            border-color: aqua;
            border-style: solid;
            border-width: 50px;
            width: 300px;
        }
        #d1{
            background: brown;
            margin: 60px;
            padding: 50px;
        }
        #d2{
            background: blue;
            margin: 50px;
            padding: 60px;
        }
    </style>
</head>
<body>
<div id="d1">d1111111111111111111111111111111111111111111111111111111111111</div>
<div id="d2">d2222222222222222222222222222222222222222222222222222222222222</div>
</body>

在这里插入图片描述

由上图可知：
1.两个元素总高度= div1元素框的总高度 + div2元素框的总高度 - div2margin-top（因为div2的margin小）
2.由于div设置了宽度，图中的文字长度大于了允许的宽度，则会超出
3.div的margin右边是自适应的
4.body随div变化

5.定位

在这里插入图片描述

5.1标准流（position默认值）

说白了就是一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。网页在解析的时候，遵循于从上向下，从左向右的一个顺序，而这个顺序就是来源于标准文档流。
标准流下，属性top, bottom, left, right 或者 z-index 声明等无效，不起作用
在这里插入图片描述

5.2绝对定位

absoulte定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于"相对"一词，为什么这么讲呢？原来，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的，举个例子，a元素使用absoulte定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素(注意，一定要是直系祖先才算哦~），直到< html>标签为止，这里还需要注意的是，relative和static方式在最外层时是以标签为定位原点的，而absoulte方式在无父级是position非static定位时是以< html>作为原点定位。< html>和< body>元素相差9px左右。
absoulte是根据祖先类的border进行的定位。
Note : 绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。
在这里插入图片描述

5.3相对定位

相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，可以说它是static到absoult的一个中间过渡属性，最重要的是它还占有文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据虚线位置( top / left / right / bottom 等属性生效之前)进行的定位，这点一定要理解。
在这里插入图片描述

5.4浮动

我们要区别与文字内容靠左( text-align:left)靠右( text-align:right)样式，浮动只针对html标签设置靠左靠右浮动样式。float浮动样式没有靠中（浮动居中）的样式，如果需要让标签对象居中我们在css布局居中相关文字给大家详细讲解介绍（css margin）。这里记住浮动靠右使用float:right，浮动靠左使用float:left样式即可
由于元素浮动后脱离了文档流，所以父元素是无法根据元素来自适应的。
我们要区别与文字内容靠左( text-align:left)靠右( text-align:right)样式，浮动只针对html标签设置靠左靠右浮动样式。float浮动样式没有靠中（浮动居中）的样式，如果需要让标签对象居中我们在css布局居中相关文字给大家详细讲解介绍（css margin）。这里记住浮动靠右使用float:right，浮动靠左使用float:left样式即可。

总结一下：

1.float起初是为了解决文字环绕的问题而产生的。

2.元素float的时候，该元素自己的display会变为block。

3.父元素如果不加overflow：hidden的时候，不会出现在父元素内，或者父元素不被该元素撑开，没有高度。

4.float元素会占据行内元素的空间，会影响周围行内元素的位置。

5.float元素不会占据块级元素的空间，下一个块级元素会当没有浮动元素的出现，而出现在浮动元素的位置；这个现象出现的解决办法就是为clear属性赋值，left，right，或者both。

6.clear会根据值清除不同浮动对该元素影响，left清除左浮动，意思就是float：left的元素会占据文档中块元素的位置，以此类推。

7.浮动在IE7这个喝三鹿牛奶长得浏览器下会出现很多bug，让人匪夷所思，比如一行内左右浮动算两行；多个浮动，倒数第二个又间距；多个浮动阶梯排列等问题。

在这里插入图片描述