JAVAWEB---CSS

作者: 一花一世界yu | 来源:发表于2020-06-14 10:10 被阅读0次

JAVAWEB---CSS

一、重点知识

沙盒模式要一起设置边距属性时，顺序上右下左

相对定位，不给定位点是找不到右侧的，会向左移动，它只对上左有效

相对定位如果向右移动会反向移动，因为相对定位以自己左上角为定位点

flex中图片的长宽必须都设置，不然就出现图片图片失真

子盒子是根据父盒子来定位的，但是前提是父盒子遵循定位原则

相对定位，定位后原来的位置依然被他占着，不允许别人使用，而绝对定位，定位后，原来的位置就空出来了

rgba四个参数最后一个参数代表透明度，取值范围0 到1，取小数点后一位

字体大小不能用%做单位，但是样式的长和宽可以用%做单位，以浏览器大小做参考

伪类选择器作用在a标签可以使有焦点事件时才生效在伪类选择器设置的配置

a*3可以打印三个a标签

弹性盒子中不允许继承

内联元素本来就可以设置背景颜色的

标签元素在转换为内联元素时前面的点会消失

只需要将容器设为display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，然后就像在表格里一样，给子元素加个vertical-align: middle就行了,多行文字垂直居中

二、课堂知识

CSS

第1节 CSS简介

1.1 CSS全称为“层叠样式表”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等
1.2 CSS的代码语法
选择器｛属性：值;属性:值….. ｝

image

</center>

第2节 CSS基本知识

内联式CSS样式:直接写在html标签中
嵌入式CSS样式:写在当前文件中

<style type="text/css">
 p{
 color:red;
 }
</style></pre>

外部式CSS样式:写一个单独的文件中
<link rel="stylesheet" type="text/css" href="css/abc.css"/>

第3节 CSS的选择器

什么是选择器?

每一条css样式声明（定义）由两部分组成

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

选择器的分类?
1、标签选择器 p{}
2、类选择器 .claa{}
3、ID选择器 (全局唯一) #id{}
4、子选择器 > （表示第一代子元素） #id>p{} 如果没有>直接是空格的话就是后代所有的元素 #id p{}
5、通用选择器 * *{}
6、伪类选择器 :hover p:hover{}
7、分组选择器 h1,h2,p h1,h2,p{}
</pre>

第4节 CSS的继承、层叠和特殊性

继承性

<div style="color: red;font-size: 100px;">
<p>ppppp</p>
</div></pre>

权值

1、标签的权值为1
2、类选择符的权值为10
3、ID选择符的权值最高为100
如果样式作用在一个标签上,根据权值来应用使用哪个样式(应用权值高的)</pre>

层叠

当作用在同一个标签上的样式权值相同时,那么后面的样式会生效
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）</pre>

重要性 !important

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决

第5节 CSS样式格式化排版

文字—字体:
font-family: "microsoft yahei";
font-family: "微软雅黑";
文字—字号颜色:
font-size: 12px;
color: #FF0000;
文字—粗体:
font-weight: bold;
文字—斜体:
font-style: italic;
文字-下划线
text-decoration: underline;
文字-删除线
text-decoration: line-through;
段落-缩进
text-indent: 2em；等于文字大小像素*2
段落-行间距(行高)
line-height: 1.5em;
段落-中文字间距、字母间距
1、letter-spacing:50px; 中文或者是英文字母之间的间距
2、word-spacing:50px; 英文单词之间的间距
段落-对齐
text-align: center;为内联元素中的文本或者图片设置居中</pre>

第6节元素分类

块状元素

内联元素

块状内联元素

第7节 CSS盒模型

盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系(用于前端布局)

image

</center>

image

</center>

第8节 CSS的布局

布局模型

1、流动模型（Flow）

流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML网页元素都是根据流动模型来分布网页内容的

流动模型的特点
1、块状元素独占一行
2、内联元素不会独占一行而是从左向右排列</pre>

2、浮动模型（Float）

正常情况下块状元素独占一行,那么怎么能让块状元素并排显示呢?这时候就用到了浮动模型

实现浮动的css属性
float:left|right

高度塌陷问题处理
clear：left | right | both;</pre>

image

</center>

3、层模型（Layer）

层模型的三种形式?
1、绝对定位(position: absolute)
div{
width: 200px;
height: 200px;
border: 2px red solid;
position: absolute;
left: 100px;
top: 100px;
}
2、相对定位(position: relative)
div{
width: 200px;
height: 200px;
border: 2px red solid;
position: relative;
left: 100px;
top: 100px;
}
3、固定定位(position: fixed)
div{
width: 200px;
height: 200px;
border: 2px red solid;
position: fixed;
left: 100px;
top: 100px;
}

4、Relative与Absolute组合使用

<div id="box1">
<div id="box2"></div>
</div>

box1{

width: 200px;
height: 200px;
position: relative;
}

box2{

width: 100px;
height: 100px;
position: absolute;
left: 20px;
top: 20px;
}
</pre>

第9节单位和值

颜色值
1、英文命令颜色
p{color:red;}
2、RGB颜色
p{color:rgb(133,45,200);}
3、十六进制颜色
p{color:#00ffff;}

长度值 :长度单位总结一下，目前比较常用到px（像素）、em、% 百分比
1、像素 px
2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；
如果 font-size 为 18px，那么 1em = 18px上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）
</pre>

image

</center>

第10节 CSS样式设置小技巧

水平居中设置-行内元素

被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的</pre>

水平居中设置-定宽块状元素

定宽块状元素,设置自身为 margin-left：auto；margin-right:auto</pre>

水平居中设置-不定宽块状元素

</style>

<div class="container">
<ul>
<li><a href="#">1</a> </li>
<li><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
</ul>
</div></pre>

垂直居中-父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height 高度一致来实现的

<div class="container">
内部文本
</div>

<style type="text/css">
.container{
background-color: red;
height: 50px;
line-height: 50px;
}
</style></pre>

垂直居中-父元素高度确定的多行文本

<div class="container">
<div>
<p> 内部文本</p>
<p> 内部文本</p>
<p> 内部文本</p>
<p> 内部文本</p>
<p> 内部文本</p>
</div>
</div>

.container{
background-color: red;
height: 500px;
display: table-cell;
vertical-align: middle;
}</pre>

隐性改变display类型

隐藏标签 <p style="dispaly:none">PPPPPPPPP</p></pre>

块状元素和非块状元素相互转换
display:block
display: inline</pre>

第11节 Flex弹性盒子模型布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对有些特殊布局非常不方便.2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

image

① Flex布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局.

.box{
display: flex;
}</pre>

Webkit 内核的浏览器，必须加上-webkit前缀(这是兼容老版本浏览器的写法)

.box{
display: -webkit-flex; /* Safari,chrome */
display: flex;
}</pre>

注意: 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

② 基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

image

</center>

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

③ 容器的属性

以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
</pre>

[1] flex-direction属性 flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
flex-direction: row | row-reverse | column | column-reverse;
}</pre>

image

</center>

它可能有4个值

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

[2] flex-wrap属性默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行.

image

</center>

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
</pre>

它可能取三个值。

nowrap（默认）：不换行。

image

</center>

wrap：换行，第一行在上方。

image

</center>

wrap-reverse：换行，第一行在下方。

image

</center>

[3] flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
flex-flow: <flex-direction> <flex-wrap>;
}</pre>

[4] justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}</pre>

image

</center>

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

[5] align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}</pre>

image

</center>

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

[6] align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}</pre>

image

</center>

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴

第12节前端布局

一列布局
二列布局
三列布局
混合布局

第13节其他常用前端属性介绍(小栗子练习)

设置圆角

border-radius: 3px;</pre>

取消a标签的默认下划线

text-decoration: none;</pre>

取消无序列表的点

list-style: none;</pre>

取消input的边框以及焦点

outline: none;
border: none;</pre>

网友评论

本文标题：JAVAWEB---CSS

本文链接：https://www.haomeiwen.com/subject/dgqxxktx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

JAVAWEB---CSS

一、重点知识

二、课堂知识