HTML\CSS

最新推荐文章于 2022-04-19 21:39:01 发布

thefantast

最新推荐文章于 2022-04-19 21:39:01 发布

阅读量132

点赞数 1

文章标签： HTML

本文链接：https://blog.csdn.net/thefantast/article/details/90647913

版权

HTML\CSS

div标签：块级元素，特点是独占一行

<div style="color:skyblue;border-style: solid">div1</div>  //实线边框
<div style="color:skyblue;border-style: dashed">div1</div>  //虚线边框
<div style="color:skyblue;border-style: dashed;border-color: green">div1</div>	//边框颜色改变
<div style="color:skyblue;border: dashed green;">div1</div>  //合在一起精简
<div style="color:skyblue;border: 1px dashed green;">div1</div> //设置宽度

span标签：行内（内联）元素，在同一行显示多个

CSS

三种写法：行内样式（内联样式）（基本不用）

内部样式表写在head里

外部引入

第三节　选择器

ID选择器：标签单独写id，比如

<div id="div1">div1</div>
#div1{
    border: 1px solid #1620FF;
}

标签选择器：直接在 head style 中写

div{
    color: red; //全局属性
}

类选择器：

<div class="class-red">div2</div>

<div id="div1" class="class-red border-green">div1</div>

<span class="class-red">	//类选择器
 .class-red span{
    color: aqua;
 }
.class-red span{	//后代选择器（有空格）
            color: aqua;
        }
.class-red .inner-span{
            color:saddlebrown;
        }

第四节字体属性交并集兄弟选择器

字体属性

<div class="font-lw">老王</div>
.font-lw{
            font-size: 16px;  // 大小
            font-family: 华文行楷; //字体
            font-style: italic;  //风格 斜体
            font-weight: normal;   //加粗 100-900
            text-align: center; //排列位置
            font: 600 20px "\u5fae\u8f6f\u96c5\u9ed1";	//合在一起写
			text-indent: 2em;	//首行缩进
			line-height: 50px;	//行高 可以控制垂直居中，设置与块行高相同等于垂直居中
        }

<a href="">住你隔壁了</a>
a{
  	 text-decoration: none; //去掉a标签的下划线
 }

交并集选择器

<p>我是段落</p>
<p id="id">我是段落</p>
<p class="para">我是段落</p>
<p class="para">我是段落</p>
<p>我是段落</p>

p.para{		//交集选择器（没有空格） 标签.类    标签#id
    color: red;
}

a,#id{		//并集选择器
    color:red;
}

兄弟选择器

a+#id1{		//兄弟选择器  命中a标签后紧跟着的带id1的标签
    color:red 
}
a+.para{
    color:red
}
a~.para{	//a标签后所有para类标签全部变红
    color:red
}

通配符选择器

*{				//命中所有
    color: red;
}

伪类选择器

伪类用于向某些选择器添加特殊的效果

锚伪类：

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

a:hover{	//鼠标悬停在a标签上时的动作
    color: red;
    text-decoration: underline;
}

注：a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

a:active 必须被置于 a:hover 之后，才是有效的。

第五节元素的显示模式

行内元素没有办法给赋值宽和高，取决于它所包裹的东西

.div1{
    width:500px;
    height: 500px;
    background-color: lawngreen;
}
.span1{
    width:500px;
    height: 500px;
    background-color: lawngreen;
}
<div class="div1">老王来了</div>
    <div>老王来了</div>
    <span class="span1">老王来了</span>
    <span>老王来了</span>
    <span>老王来了</span>

.outer{
    width: 600px;
    height: 600px;
    background-color: lawngreen;
}
.inner-1{
    width: 200px;
    height: 200px;
    background-color: blue;
    display: inline;	//显示模式：行
}
.inner-2{
    width: 200px;
    height: 200px;
    background-color: pink;
}
没有体积，挤占
<div class="outer">
        <div class="inner-1"></div>
        <div class="inner-2"></div>
</div>
有体积
<div class="outer">
        <div class="inner-1">老王来了</div>
        <div class="inner-2"></div>
</div>

再改动，全变成一行，宽高设置失效
.inner-2{
            width: 200px;
            height: 200px;
            background-color: pink;
            display: inline;
        }
锁定（又想设置行显示又想有宽高）
display: inline-block;

a标签也是行内元素

我们经常需要给a标签设置块级显示给予宽高，使得点击一片区域都有超链接效果

a{
    display: block;
    width: 100px;
    height: 100px;
}

取出无序列表前的小点

ul{
    list-style: none;
}

消除外边距和内边距

*{
    margin: 0px;
    padding: 0px;
}

设置三个一行的块显示锚点/超链接

<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .nav{
        width: 1050px;
        height: 65px;
        margin: auto;
        /*background-color: lawngreen;*/
        /*margin: 50px 80px 100px 500px;*/
    }
    li{
        display: inline-block;
        list-style: none;
        float: left;
    }
    a{
        width: 350px;
        height: 65px;
        display: inline-block;
        text-decoration: none;
        font-size: 20px;
        font-weight: 600;
        color: white;
        text-align: center;
        line-height: 65px;
    }
    .nav .inner-a-1{
        background-color: #69639a;
    }
    .nav .inner-a-2{
        background-color: #9385f5;
    }
    .nav .inner-a-3{
        background-color: #3c64c2;
    }
</style>
<div class="nav">
        <ul>
            <li><a class="inner-a-1" href="">JAVA WEB</a></li>
            <li><a class="inner-a-2" href="">项目实战</a></li>
            <li><a class="inner-a-3" href="">微服务/中间件/分布式</a></li>
        </ul>
</div>

第六节 CSS三大特性精灵图

继承层叠优先级（决定哪个覆盖哪个的权重）

div{
    background-color: skyblue;
    width: 500px;
}
.div1{
    border: 1px solid green;
    width: 100%;
}
!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。

#div{
    width: 35px;
    height: 30px;
    background: url("sprites.jpg") no-repeat -15px -82px; //调整选取图片的位置
}

相对于选定块，图片向上向左为正坐标，向下向右为负坐标

第七节三大重点之盒子模型

任何一个盒子的高度和宽度是由它的内容+内边距padding+边框border+外边距margin 所构成

<style>
    .div-wang{
        background-color: lawngreen;
        width: 500px;
        height: 500px;
        border: 2px solid red;
        padding: 50px 20px 30px 60px;
        margin: 50px;
    }
    table{
        border:1px solid blue;
        border-collapse:collapse; //表格边框 坍塌合并
    }
    td{
        border:1px solid red;
    }
</style>

外边框的合并：两个相邻的元素，一个设置了底部，一个设置了顶部页边距，会采用较大的那个

.div-wang{
    background-color: lawngreen;
    width: 300px;
    height: 300px;
    border: 2px solid red;
    padding: 50px 20px 30px 60px;
    margin: 50px;
}
.div-wang-under{
    margin-top:200px;
    border:2px solid green;
}

如果发生嵌套时，父元素的padding和子元素的margin之和是两个内容块之间的距离，此处是150px

.div-wang{
    background-color: lawngreen;
    width: 300px;
    height: 300px;
    border: 2px solid red;
    padding: 50px;
    margin: 50px;
}
.div-wang-under{
    margin-top:100px;
    border:2px solid green;
    width:50px;
    height: 50px;
}
<div class="div-wang">
        <div class="div-wang-under">
        </div>
</div>

但是，把外层的边框和内边距删去，即如果父元素没有设置padding和border，此处子元素的页边距margin-top会和父元素的margin合并，同样会选取较大的那个

.div-wang{
    background-color: lawngreen;
    width: 300px;
    height: 300px;
    margin: 50px;
}
.div-wang-under{
    margin-top:100px;
    border:2px solid green;
    width:50px;
    height: 50px;
}

除增加border给父元素之外，增加overflow属性也可以解决父子元素边距嵌套覆盖问题

.div-wang{
    background-color: lawngreen;
    width: 300px;
    height: 300px;
    overflow: hidden; // 溢出隐藏：一个元素如果超出父元素的包裹范围，显示还是不显示
    margin: 50px;
}
.div-wang-under{
    margin-top:100px;
    border:2px solid green;
    width:50px;
    height: 50px;
}

第八节三大重点之浮动

浮动流脱离了标准流，和标准流是互不干扰的。

我们浮动的目的，就是可以把多个块级元素放到想要的一行上。

此处把两个块级元素都设置成行显示但是依然有缝且无法用消除margin、padding的方式除去

<style>
    *{
        margin: 0px;
        padding:0px;
    }
    .inner-1{
        width: 200px;
        height: 200px;
        background-color: lawngreen;
        display: inline-block;
    }
    .inner-2{
        width: 300px;
        height: 300px;
        background-color: red;
        display: inline-block;
    }
</style>
<div class="outer">
    <div class="inner-1"></div>
    <div class="inner-2"></div>
</div>

浮动的脱标

<style>
    .inner-1{
        width: 200px;
        height: 200px;
        background-color: lawngreen;
        float: left;
    }
    .inner-2{
        width: 300px;
        height: 300px;
        background-color: red;
    }
</style>

对需要的块都设置浮动

.inner-1{
    width: 200px;
    height: 200px;
    background-color: lawngreen;
    float: left;
}
.inner-2{
    width: 300px;
    height: 300px;
    background-color: red;
    float: left;
}

浮动是在包裹它的元素的盒子的内部浮动的。这里可以看出是在父类的盒子内浮动。

.outer{
    margin-top: 300px;
}
.inner-1{
    width: 200px;
    height: 200px;
    background-color: lawngreen;
    float: left;
}
.inner-2{
    width: 300px;
    height: 300px;
    background-color: red;
    float: left;
}

一般使用浮动为了不遮盖标准流显示，写一个外部div包裹起来，放到该放的地方，内部就可以用float进行排版。

浮动带来的问题

第八节-浮动副作用

两个子元素脱离标准流，但是父元素并没有脱离标准流，会导致父元素认为自己内部没有元素，显示高度为0。此处如果继续向下布局：

.outer-2{
    width: 300px;
    height: 300px;
    background-color: blue ;
}

第八节-浮动副作用2

下面的蓝色盒子认为上面没有东西，依照标准流排布。解决办法：

1.overflow

.outer{
    margin-top: 300px;
    overflow: hidden;
}

overflow: hidden 会把超出父元素范围的东西全部剪裁（隐藏），有时我们不想隐藏，有时子元素还要伸到父元素外面一点显示信息。它有其局限性。

2.额外标签

<div class="outer">
    <div class="inner-1"></div>
    <div class="inner-2"></div>
</div>
<div style="clear: both"></div>
//该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置
<div class="outer-2">

通常，我们往往会将“清除浮动”单独定义一个CSS样式，如:

.clear {
    clear: both;
}

然后使用

来专门进行“清除浮动”。

但是，这么多加一个DIV有点不妥。一是多了一个没有意义的DIV，二是在用dojo做Drag & Drop的时候，由于这个DIV是容器DIV的一个字节点，如果这个节点被移动，则会造成排版上的Bug

3.额外标签升级版

.clearfix:after{ content: "";display:block;height: 0;clear: both;visibility: hidden}
<div class="outer clearfix" >
    <div class="inner-1"></div>
    <div class="inner-2"></div>
</div>

.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容；

content: “”; <----内容：什么也没有；

display: block; <----加入的这个元素转换为块级元素。

height: 0; <----高度为0；

clear: both; <----清除左右两边浮动。

visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间，只是看不到而已；

第九节三大重点之定位

static 绝对定位相对定位固定定位

普通布局默认是static，它也可以清除所设定的位移（top、left）的效果

绝对定位：

<style>
    .outer{
        width: 300px;
        height: 300px;
        background-color: lawngreen;
        position: absolute;  //绝对定位
        left: 30px;
        top:50px;
    }
    .outer-2{
        width: 300px;
        height: 300px;
        background-color: red;
    }
</style>
<div class="outer"></div>
<div class="outer-2"></div>

9-1

绝对定位没有占用标准流的布局空间

相对定位：

position: relative;

9-2

相对定位的绿盒子占用它原本所在（没有left和top）的空间，加上left和top后所移出去的部分并没有占用布局空间。

嵌套情况下：可以看出使用绝对定位的子盒子是根据浏览器的边框来决定的。并不是跟着父盒子跑动

.outer{
    width: 300px;
    height: 300px;
    background-color: lawngreen;
    margin-top: 400px;
}
		.inner{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 20px;
            left:50px;
        }
<div class="outer">
    <div class="inner"></div>
</div>

9-3

position: relative;

改成相对定位后则会根据所在的父盒子移动，坐标原点以父盒子为标准

相对定位会占有父盒子的部分空间，如果我们想在父盒子的空间中放入其他东西，子盒子使用绝对定位就很有必要。这时想让子盒子在一定范围内绝对而不是跟着浏览器绝对，可以给父盒子加定位属性,只要父盒子带有定位属性，子盒子的绝对定位就根据父盒子的位置来决定。父盒子需要排版，往往使用相对定位占有空间，子盒子为了不占用空间往往使用绝对定位。 //“子绝父相”

.outer{
    width: 300px;
    height: 300px;
    background-color: lawngreen;
    margin-top: 400px;
    position: relative;
}
		.inner{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 20px;
            left:50px;
        }

固定定位

position: fixed;

盒子定在它所在的位置再也不动了（而且不受父盒子相对定位的影响），别人怎么动跟这个盒子没有关系。（滑动浏览器依然保持对屏幕的位置不变）

第十节实战

第十一节字体图标兼容性

在CSS中对字体图标声明：

@font-face {
    font-family: "IconMoon";
    src: url("../font/IconMoon-Free.ttf");
    font-weight: normal;
    font-style: normal;
}

key-value选择器

[class^="icon-"]	//选中以icon-开头的类
[class*="icon-"]    //选中含有icon-的类

[class^="icon-"]:before, [class*="icon-"]:before{	//统一声明库
    font-family: "IconMoon";
    font-style: normal;
}
.icon-sound-down:before{	//图标内容分别操作
    content:"\ea2c";
}

thefantast

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML\CSS

HTML\CSSdiv标签：块级元素，特点是独占一行<div style="color:skyblue;border-style: solid">div1</div> //实线边框<div style="color:skyblue;border-style: dashed">div1</div> //虚线边框<div style=...
复制链接

扫一扫