Web前端基础---CSS样式--盒子模型--浮动与定位

Day02 CSS样式

DIV和CSS

 DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。即<div> 标签。CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的head部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

CSS的使用方式

1、行内样式使用style属性进行设置。
2、内部样式在<style>标签中书写CSS样式设置。<style>标签放到<head>中。
3、外部样式CSS代码保存到扩展名为.css的文件中，HTML文件通过链接方式引用该CSS文件<link type=”text/css” rel=”stylesheet” href=”CSS文件路径”/>

示例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>DIV和CSS</title><!--外部样式--><link rel="stylesheet" type="text/css" href="css/01.css"/><!--内部样式--><style type="text/css">div {width: 1000px; height: 100px; background-color: aquamarine;}</style></head><body><!--行内样式--><div style="width: 800px; height: 200px; background-color: #008000;">块1</div></body>
</html>

三种方式的优先级：就近原则，行内样式>内部样式&外部样式（区分内外部的顺序）
三种方式的生效范围：外部样式>内部样式>行内样式

CSS选择器

选择器：通过选择器来找到需要设置样式的元素。常用选择器：标签选择器ID选择器：ID属性值在当前页面唯一，使用“#”来指定类选择器：给标签设置class属性，可重复，类选择器用“.”来指定
三大基本选择器的优先级：ID选择器>类选择器>标签选择器

案例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>选择器</title><style type="text/css">/*标签---优先级3*/h1 {color: red;}/*ID---优先级1*/#first {color: #008000;}#secend {color: chartreuse;}/*类选择器---优先级2*/.h1 {color: orange;}</style></head><body><h1 id="first">好好学习</h1><h1 id="secend">天天向上</h1><h1 class="h1">少壮不努力</h1><h1 class="h1">老大徒伤悲</h1></body>
</html>

CSS基本样式

1、字体样式文字大小：font-size: large;文字粗细：font-weight: bold;文字字体：font-family: "宋体";文字倾斜：font-style: italic;
2、文本样式文本对齐方式：text-align: center;文本颜色：color: #FF1493;文本装饰：text-decoration: underline;设置行高：line-height:200px ;
3、超链接伪类样式a：所有超链接a:link{}点击前超连接文字格式a:visited{}点击后超连接文字格式a:hover{}鼠标悬浮时（鼠标移至链接）a:active{}鼠标未释放注意：cursor属性是调整鼠标样式，常用值：pointer,help,wait...
4、边框样式边框宽度：border-width按照方向设置：border-(left/right/top/bottom)-width边框颜色：border-color按照方向设置：border-(left/right/top/bottom)-color边框风格：border-style按照方向设置：border-(left/right/top/bottom)-style以上可简写为：border：width值 边框线条样式 颜色；圆角边框：border-radius按照方向设置：border-(top/bottom)-(left/right)-radius
5、背景样式背景颜色：background-color:背景图片：background-image:url(“图片路径”);背景是否平铺：background-repeat:repeat/no-repeat/repeat-x/repeat-y背景图片大小：background-size:200px 300px;背景偏移：background-position:20px 50px;

案例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>css基本样式</title><!--内部样式--><style type="text/css">/*这里使用的是ID选择器*/#first {width: 200px;height: 200px;/*字体样式*/font-size: large;font-weight: bold;font-family: "宋体";font-style: italic;/*文本样式*/text-align: center;color: #FF1493;text-decoration: underline;line-height:200px ;/*边框基础样式*/border-width: 5px;border-color: yellow;border-style: double;/*border: double 5px yellow ;*/border-radius: 20%;/*背景样式*/background-color: antiquewhite;background-image: url("img/timg.jpg");background-size: 200px 200px;background-repeat: no-repeat;background-position: center;}/*这里使用的是标签选择器*//*超链接伪类样式*/a:{color: blue;}a:link{color: black;text-decoration: none;}a:visited{color: green;}a:hover {color: pink;cursor: wait;}a:active{color: orange;}</style></head><body><div id="first">少年郎，看我！</div><br /><br /><a href="http://www.baidu.com">百度一下</a></body>
</html>

盒子模型

 HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区（content）、填充(padding)、边框(border)和空白边(margin)。 CSS 为四个部分定义了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。

padding内边距

也叫做填充，指内容与边框之间的空间。
样式属性：padding,padding-top,padding-right,padding-bottom,padding-left
padding属性的值：一个值：padding:20px;4个方向内边距都是20px两个值：padding:20px 30px;上下20px，左右30px三个值：padding:20px 30px 40px;上20px，右边30px，下40px，左同右四个值：padding:20px 30px 40px 50px;分别是上右下左

margin外边距

也叫做空白边，是添加在边框外围的空间。
一共有5种属性：margin,margin-top,margin-right,margin-bottom,margin-left
margin属性值类型与padding一致。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div {width: 200px;height: 200px;background-color: aliceblue;border: solid 5px green;color: darkmagenta;font-size: larger;/*内边距*//*padding: 50px;*//*padding:20px 50px;*//*padding: 20px 30px 40px;*/padding: 10px 20px 30px 40px;/*外边距/空白边*//*margin: 50px;*//*margin:20px 50px;*//*margin:20px 50px 80px;*//*margin:20px 50px 80px 100px;*//*相对于父标签水平居中*/margin: auto;}</style></head><body><div>盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型</div></body>
</html>

浮动

浮动是一种非常有用的布局方式，它能够改变页面中对象的前后流动顺序。这样做的好处是，使得内容的排版变的简单，具有良好的伸缩性。
属性：float
常用值：left，right
使用浮动的<div>会向Z轴方向移动，原本所在的位置会被后面的标签挤占。
如果想要几个<div>横向排列，那么就将这几个<div>都设置相同的浮动。
如果想要后面的<div>不受前面浮动了的<div>影响，可以使用clear来清除浮动带来的影响。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>浮动</title><!--同一方向浮动会使div横向排列--><style type="text/css">#top {width: 100px ;height: 100px;background-color: #008000;float: left;}#middle {width: 150px ;height: 150px;background-color: red;float: left;}#bottom {width: 200px ;height: 200px;background-color: blue;float: left;}#secendLine {width: 150px ;height: 150px;background-color: blue;clear: both;}</style></head><body><div id="top"></div><div id="middle"></div><div id="bottom"></div><div id="secendLine"></div></body>
</html>

定位

改变元素位置。
属性：position
属性值：
relative：相对定位。相对于原来的位置进行偏移，原本的位置保留。
absolute：绝对定位。会破坏文档流，在Z轴方向移动，原本的位置会被后面的<div>挤占。相对于页面左上角进行偏移。原本的位置，不会保留。
fixed：固定定位。会固定在指定的位置，不受滚动条的影响。相对于页面的某个角来进行偏移。
偏移量属性：left，top，right，bottom。
属性值：偏移的像素值。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>定位</title><style type="text/css">#top {width: 100px ;height: 100px;background-color: green;/*绝对定位--原始位置不保留*/position: absolute;top: 30px;    }#middle {width: 150px ;height: 150px;background-color: red;/*相对定位--原始位置保留*/position: relative;left: 220px;top: 20px;}#bottom {width: 200px ;height: 1000px;background-color: blue;}#fixed {width: 100px;height: 100px;background-color: black;border-radius: 50%;/*固定定位--原始位置不保留*/position: fixed;right: 200px;bottom: 100px;}</style></head><body><div id="top"></div><div id="middle"></div><div id="bottom"></div><br /><br /><div id="fixed"></div><div style="width: 100px; height: 100px; background-color: #FFFF00;"></div></body>
</html>

标签类型转化

HTML标签分为三种不同的类型，块元素，行元素，行块元素。块元素：以区域块形式出现，独占一行（自动换行），可以设置宽高。常见的块元素：<div>、<h*>、<p>、<ul>、<li>、<ol>...
行元素：按行排列，不会自动换行，不能设置宽高。常见的行元素：<strong>、<em>、<font>、<a>...
行块元素：按行排列，不会自动换行，但是可以设置宽高常见行块元素：<img/>、<textarea>...行块元素的转换:
属性：dispaly
属性值：
inline：将该元素设置为行元素（行元素的默认值）
block：将该元素设置为块元素（块元素的默认值）
inline-block：将对象呈现为内联元素，对象内的元素块级展示（设置为行块元素）
none：隐藏元素

案例：实现横向导航栏效果

实现横向展示的两种方式：浮动，display:inline-block。
1、浮动元素之间没有外边距，display:inline-block有默认外边距
2、浮动会对后面的元素产生影响，display:inline-block不会
3、非强制情况下，推荐使用display:inline-block

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>横向导航栏</title><style type="text/css">li {width: 100px;height: 30px;background-color: deeppink;text-align: center;line-height: 30px;border-radius: 10%;/*中间有空隙*//*display: inline-block;*//*中间没有空隙*/float: left;/*list-style-type属性是用来定义列表项符号*/list-style-type: none;}a {color: white;text-decoration: none;}a:hover {color: orange;}</style></head><body><ul><li><a href="">首页</a></li><li><a href="">天猫</a></li><li><a href="">聚划算</a></li><li><a href="">天猫超市</a></li><li><a href="">苏宁易购</a></li></ul></body>
</html>

Web前端基础---CSS样式--盒子模型--浮动与定位相关推荐

Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)
文章目录一.什么是CSS 二.CSS的三种样式及其优先级三.CSS基本选择器及其优先级四.其他常见的选择器五.选择器优先进阶六.css的常见属性(颜色.背景.字体.边框) 七.内间距和外间距 ...
[Web前端基础] CSS优先级、JS运算优先级、CSS设置在第几行进行超出部分省略号、JS设置元素样式的六种方式
CSS优先级 !important> 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承如果有多个复合选择器选中同一个元素,则需要 ...
CSS样式——盒子模型
盒子模型一.什么是盒模型每一个标签都是一个矩形,像一个盒子,所以HTML页面的布局可以理解为多个盒子组合嵌套排列而成二.组成 1. width 宽度 2. height 高度 3.padding ...
web前端练习32----Css，盒子模型,display,visibility,overflow,单位em
一.盒子(框)模型 1.1图形示例: 1.2盒子模型的主要构成,由内向外: 内容区:width,height 内边距:padding 边框:border 外边距:margin 可见宽高 = 内容区+内 ...
Web前端开发——CSS样式（Ⅰ）文本与文字样式
目录 1. 单位 2. 颜色 3. 文本 3.1 字符间距letter-spacing 3.2 行高line-height 3.2.1 基本概念 3.2.2 行高的应用--居中垂直对齐效果 3.3 对 ...
前端基础(八)_盒子模型（标准盒子模型和怪异盒子模型）
盒子模型什么是盒子模型网页设计中常听的属性名:内容(content).内边距(padding).边框(border).外边距(margin), CSS盒子模型都具备这些属性.这些属性我们可以用日常 ...
盒子模型+浮动布局+定位布局
盒子模型 border (边框)元素边框 margin 外边距 padding 内边距 content (内容)可以是文字或图片浮动布局 1.浮动:float:left/right; 2.清 ...
web前端之CSS样式案例--博雅网页
前言 CSS已经学了一些基础内容了,我们来讲解一个小案例吧.以博雅互动的官网首页举例. 版心首页的版心如下: 这里我们要普及一个概念,叫"版心".版心是页面中主要内容所在的区域. ...

Web前端基础---CSS样式--盒子模型--浮动与定位

Day02 CSS样式

DIV和CSS

CSS的使用方式

示例

CSS选择器

案例

CSS基本样式

案例

盒子模型

padding内边距

margin外边距

浮动

定位

标签类型转化

案例：实现横向导航栏效果

Web前端基础---CSS样式--盒子模型--浮动与定位相关推荐

最新文章

热门文章