MyselfNotes_html&css_by_sir.w-CSDN博客

本文链接：https://blog.csdn.net/happypok/article/details/131603529

本文介绍了HTML表单的常见属性，如radio、checkbox、location等，以及CSS的引入方式，包括内联式、内嵌式和外链式。详细阐述了CSS的选择器，如交集、并集、后代、子辈等，并讨论了元素类型、隐藏方法和盒子模型。此外，还讲解了CSS的居中方式、元素浮动和定位，以及弹性盒子布局的概念。

摘要由CSDN通过智能技术生成

html表单链接列表视图

常见属性

radio单选框
checkbox复选框
location下拉框
autocomplete 表示自动填充 -> off 关闭placeholder 悬浮文本
required 要求必填
autofocus 自动获取焦点(只能获取一个焦点)
a标签中的target 默认_ self,目标页替换当前页
其中_blank，跳转新的标签页
img图片，title 悬浮文本，alt 表示图片加载失败显示的东西

css引入的三种方式

在style标签中引入，内嵌式直接将 css 代码书写在 head 标签内的 style 标签内嵌式的书写方式无法使用复用,仅仅初步的将结构和样式解耦,但是解耦不彻底

<style>
        h1{
            font-family: 方正静蕾简体;
            color: coral;
        }
        div{
            background-color: chocolate;
        }
    </style>

行内式直接将 css 代码书写在标签内,注意,这种书写方式严重违背css 解耦结构和样式的原则,但是由于其优先级极高,因此使用也非常普遍
```
<p style="background-color: palevioletred; color: whitesmoke; font-style: italic;">这是一个段落</p>
```
外链式引入一个外部独立的 css 文件到本页面 rel:stylesheet 表示引入的是一个样式表，href:独立文件的路径
```
<link rel="stylesheet" href="./css/myStyle.css">
```
+++

其中行内式的优先级最高，其余看外联式和内嵌式哪个在后面

css的复合选择器

交集选择器，class用点，id用#

/* 1:交集选择器
tagName.class{}
tagName#id{}
由一个标签后面紧跟类别或者 id,必须同时满足两个条件
才可以成功选取,只有两部分组成
*/
span.test{
font-style: italic;
}

并集选择器，可以一次性选择好几个，其中要用逗号隔开

/* 2:并集选择器
sel1,sel2,sel3,selN{
只要符合其中任意一个选择器就可以成功选取
}
*/
span.test,h3#title,h4{
background-color: wheat;
}

后代选择器，用空格隔开，最后选择一个

/* 3:后代选择器
sel1 sel2 sel3 selN{
根据左祖先右后代的原则,精确拿取具有特定层级关系的
最右侧元素
}
*/
div.grand-father div.father div.child{
color:aqua;
}

子辈选择器，仅仅选取特定元素的子元素,注意只有子元素，不含孙辈元素，可以好多个儿子

/* 4:子辈选择器
sel1 > sel2{
仅仅选取特定元素的子元素,注意只有子元素，不含孙辈元素
}
*/
div.container > span{
background-color: cadetblue;
}

紧邻兄弟选择器，向下选择紧邻的兄弟元素(不包含自身),只选择一个

/* 5:紧邻兄弟选择器
sel1 + sel2{
以下三个条件缺一不可
A:向下选取
B:必须紧邻
C:互为兄弟
}
*/
p#pra + span{
text-decoration: underline;
}

兄弟选择器，向下选取兄弟元素(不包含自身)，存在很多个

/* 6:兄弟选择器
sel1 ~ sel2{
以下两个条件缺一不可
A:向下选取
C:互为兄弟
}
*/
p#pra ~ span{
color:whitesmoke;
}

全选选择器

/* 7:全选选择器
*{
选取页面所有元素,包括隐藏的元素
}
*/
*{
font-weight: 900;
}

css的伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5-css伪类选择器</title>
    <style>
        /* sel:伪类{} */


        /* 链接的样式 链接限定 */
        a:link{
            color: rebeccapurple;
            text-decoration: none;
        }


        /* 表示链接被访问过的样式 链接限定*/
        a:visited{
            color: yellow;
        }


        /* 鼠标滑过的样式 任意元素可用 */
        a:hover{
            color: red;
        }


        /* 鼠标点击未松开的样式 任意元素可用 */
        a:active{
            color: black;
            text-decoration: underline;
        }

        
        /* 使用链接的伪类选择器，顺序不可逆 link visited hover active */
    </style>
</head>
<body>
    <a href="#">点击购买张信哲济南演唱会门票</a>
</body>
</html>

css页面元素类型

页面元素存在多种类型,主要有以下两种

1:块元素(block)

eg: div p h1-h6 ul li table tr td 布局元素等等

块元素是页面中的主要组成部分,块元素自带换行,一行只能书写一个

从上往下排列,如果不指定宽度,则默认与父元素同宽,如果没有父元素,则

与body也就是浏览器同宽,块元素可以设置盒子模型参数,可以设置内部文本

对齐方式

2:行内元素(inline 内联元素)

eg: a span label img input

行内元素在页面中大多进行信息提示使用,不是页面中的主要元素,

行内元素结尾没有换行,从左往右排列,一行可以存在多个,设置盒子模型

无效,设置对齐方式无效,行内元素的宽高完全依据内部嵌套的内容

其中img input:这两个元素较为特殊,又被称之为

内联块元素 (inline-block) 与其他行内元素不同的是

可以设置盒子模型

隐藏元素

1）display:none; 隐藏自己，隐藏后原位置不保留

2）visibility:hidden; 隐藏自己，隐藏后原位置保留

3）opacity:0; 隐藏自己，隐藏后原位置保留

4）overflow:hidden; 溢出部分隐藏

盒子模型

盒子模型

是 Css 技术的基础,必须熟练掌握盒子模型才可以自如的操纵页面的元素,进行各种顺序的摆放

在 Css 中将每个元素看做一个一个矩形的盒子,这个盒子具有四个边框,边框外部的空间位置称之为外边距 margin,边框内部的空间位置称之为 padding 内边距,边框称之为 border，我们可以将每个元素看做快递包裹，这个快递箱子与其他包裹的距离就是外边距 margin，这个快递箱子内部的缓冲材料,废旧报纸就是内边距，快递箱子就是边框

在这里插入图片描述

居中方式

设置margin:0 auto，保证居中的前提

整体居中方式 1

设置像素,局限性较大,无法实现可响应式

因为像素是固定的数据
```
.container{
    margin:0 auto;
	width:700px;
    height:900px;
}
```
整体居中方式 2

设置百分比,百分比永远是与元素的父元素进行比较

如果没有父元素,则根据浏览器进行比较

注意宽度在 head 中已经进行了声明,整个浏览器的

宽度为 100%,因此这里设置宽度的百分比是参照这个数据的

但是注意,高度没有声明,是没有参照物的,所以要使用

高度的百分比必须设置参照物
```
html,body{
    height:100%;
}
.container{
    margin:0 auto;
    width:80%;
    height:100%;
}
```
整体居中方式 3

使用视口宽度和高度

视口 viewport

vw:viewport width 视口宽度

vh:viewport height 视口高度

不需要设置任何参照物

直接设置

width:80vw;

height:100vh;
```
.container{
    margin:0 auto;
	width:80vw;
    height:100vh;
}
```

设置边距

h2{
    border:solid 2px blue;
    /* 设置外边距 */
    /* margin-top: 50px;
    margin-left:100px;
    margin-bottom: 70px;
    margin-right: 10px; */
    /* 使用简略写法
    margin:上 右 下 左;
    margin:上 (右左) 下;
    margin:(上下) (右左);
    margin:(上右下左);
    */
    margin:50px 10px 70px 100px;
    padding-top:20px;
    padding-left:50px;
    padding-bottom:30px;
    border-top:dotted 10px orangered;
    border-right: double 5px silver;
    border-bottom: double 15px gray;
}

css元素浮动

margin-top 问题

当给子元素设置 margin-top 时，父元素会跟着子元素一起下来：

解决方法：

①父元素设置 overflow:hidden;

②父元素或者子元素设置 float

③父元素设置 border:1px solid transparent; （常用）

④父元素设置 padding-top:1px;

浮动:

元素设置浮动之后,根据浮动方向不断缩小,缩小到

 其内部内容为止,之后漂浮在页面中,打破标准文本流

后面的元素会递增占据其原先内容

注意!弹性盒子与浮动冲突,两者不能同时使用,在弹性

容器 flex-container 中不能使用浮动

css元素定位

position的四个属性值：

1.relative
2.absolute
3.fixed
4.static
下面分别讲述这四个属性。

   <div id="parent">
        <div id="sub1">sub1</div>
        <div id="sub2">sub2</div>
   </div>

relative

relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。**答案是它本身的位置。**在上面的代码中，sub1和sub2是同级关系，如果设定sub1一个relative属性，比如设置如下CSS代码：

#sub1
{
position: relative;
padding: 5px;
top: 5px;
left: 5px;
}

我们可以这样理解，如果不设置relative属性，sub1的位置按照正常的文档流，它应该处于某个位置。但当设置sub1为的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。

对于此，您只需要记住，sub1如果不设置relative时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。

随后的问题是，sub2的位置又在哪里呢？答案是它原来在哪里，现在就在哪里，它的位置不会因为sub1增加了position的属性而发生改变。

如果此时把sub2的position也设置为relative，会发生什么现象？此时依然和sub1一样，按照它原来应有的位置进行偏移。

注意relative的偏移是基于对象的margin的左上侧的。

absolute

这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。

当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：

（1）当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。

注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以parent的哪个定位点来进行定位呢？如果parent设定了margin，border，padding等属性，那么这个定位点将忽略margin，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。

接下来的问题是，**sub2的位置到哪里去了呢？**由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，在DreamWeaver中把它称为“层”，其实意思是一样的。此时sub2将获得sub1的位置，它的文档流不再基于 sub1，而是直接从parent开始。

（2）如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。

fixed

fixed是特殊的absolute，**即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。**将元素定位，滑动滚轮fixed定位的元素不会随着滚动

static

position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。

弹性盒子

	弹性盒子测试
属性	描述
[display]	指定 HTML 元素盒子类型。
[flex-direction]	指定了弹性容器中子元素的排列方式
[justify-content]	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
[align-items]	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
[flex-wrap]	设置弹性盒子的子元素超出父容器时是否换行。
[align-content]	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
order	设置弹性盒子的子元素排列顺序。
[align-self]	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

在这里插入图片描述

圣杯布局

layout-container

整个外部大容器

header

页眉部分

section

主要内容部分

aside

侧边栏

标签的属性中的target属性存在一个framename的值，它用来描述在指定的框架中打开被链接文档
iframe:引入一个外部页面到本页面

src表示外部页面的路径，即规定显示在 iframe 中的文档的地址

frameborder引入页面边框默认 0 无边框,此页面一般设置宽高占满父元素,否则引入的页面不会撑满父元素style=“width:100%;height:100%”

若标签中的target 属性值如果与 iframe 中的name 对应,则目标页显示在 iframe 中取代 src 原本引入的页面

<li>
	<a href="./16-表格测试.html" target="etoak">表格测试1</a>
	<a href="./16-表格测试.html" target="etoak">表格测试2</a>
	<a href="./16-表格测试.html" target="etoak">表格测试3</a>
	<a href="./16-表格测试.html" target="etoak">表格测试4</a>
</li>
<iframe src="./17-面板.html" frameborder="0" style="width:100%;height:100%" name="etoak"></iframe>
/* 16-表格测试页面 代替 17-面板页面 */ 
/* 如果想要实现侧边栏点击不同li标签实现不同跳转，只需要将li中a标签内所有的target的属性值与iframe的name属性值一致即可 */

section（main）

主要内容

footer

页脚

经典html布局

在这里插入图片描述

flex属性

flex:此参数只能使用在项目 item 中

书写完全则后面跟随三个参数

flex:flex-grow flex-shrink flex-basis;

flex-grow:默认是 0,如果容器放大,则项目不放大,如果更改为 1

则容器放大到多少,项目放大撑满容器

flex-shrink:默认是 1,如果容器缩小,则项目随之缩小,如果更改

为 0,则项目不变,溢出容器

flex-basis:用来设置项目的盒子模型等参数,但是一般不在此设置,

使用 auto 自动即可

我们在此需要的效果是容器放大,则项目放大,容器缩小,则项目缩小

盒子模型自动即可,因此这里应该设置为

flex:1 1 auto;

后两个参数为默认可以省略最终

flex:1;

vertical-align属性

设置图片与文字垂直对齐

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
img.top {vertical-align:middle;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>一个<img src="logo.png" alt="w3cschool" width="270" height="50" />默认对齐的图像。</p> 
<p>一个<img class="top" src="logo.png" alt="w3cschool" width="270" height="50" />  middle 对齐的图像。</p> 
<p>一个<img class="bottom" src="logo.png" alt="w3cschool" width="270" height="50" /> text-bottom 对齐的图像。</p>
</body>
</html>