html基础：css样式2

1、字体边框基本设置

<!--border边框：solid实线，red红色，1px粗-->

<!--font-weight: bolder字体加粗   font-size：字体大小-->

    <div style="height: 100px;width: 100px;border: 1px red solid;font-weight: bolder;font-size: 50px">1</div>

效果：

2、位置

效果：

3、float让标签飘起来

  <!--float：让div飘起来，两个都往左飘，实现并排放在一行-->

    <div style="width: 100px;height: 48px;border:1px red solid;float: left;"></div>

    <div style="width: 100px;height: 48px;border:1px black solid;float: left;"></div>

实现效果

4、display

对块级标签：display:inline把块级标签变为行内标签。

<!--display: inline把块级标签变为行内标签，行内标签不可以应用宽、高、外边距、内边距。所以只对1111实现了背景色-->

    <div style="width: 500px;height: 100px;background-color: red;display: inline">1111</div>

如上，div本是个块级标签，设置宽和高后是一个宽500px高100px的矩形，如果不加display:inline则背景颜色会应用于整个矩形。但是加了display：inline后，就将块级变为行内标签，背景颜色只适用于字1111

---------------------------------------------------------------------------------

对块级标签：display:inline-block既是行内，又是块。不会让div沾满整行。同时还会对整个矩形实现样式

<!--display: inline-block，既有行内，还是个块。首先div不会沾满一整行，同时还会对宽，高范围内的整个范围都实现样式-->

    <div style="width: 100px;height: 48px;background-color: red;display: inline-block">1111</div>

效果：

--------------------------------------------------

对行内标签：display:block转换为块

<!--display:block将行内标签span整成块,这样就既是行内又是块。但是会占整行，只宽高范围内会实现样式-->

    <span style="width: 100px;height: 100px;background-color: red;display: block;">11111</span>

效果：

-----------------------------------------------------

对行内标签：display:inline-block既是行内又是块，不会占整行

<!--display: inline-block,实现块的同时，不会沾满整行-->

    <span style="width: 100px;height: 100px;background-color: red;display: inline-block;">2</span>

效果：

总结：

　　1、不管对于行内标签还是块级标签，display:inline-block都可以实现既是行内又是块，且不占整行，对宽高范围内的那个矩形块有效

　　2、对于块级标签，display:inline可以将块转为行内,这种将块转换为行内的方式，可以设置样式。不过不能设置宽和高（真正的行内标签是没有任何样式的）

　　3、对于行内标签，display:block可以将行内转为块，这种将行内转为块的方式，可以设置样式，但同时会沾满整行

5、外边距、内边距

margin-top外边距：

<!--外边距margin-top:50外边距上方50px-->

<!--宽度可以100%，高度不可以，因为浏览器又滚动条，没法沾满-->

    <div style="width: 100%;height: 100px;border:1px red solid;">

        <div style="width: 100%;height: 40px;background-color: blue;margin-top: 50px">

        </div>

    </div>

内边距：padding-top

<!--内边距,padding-top: 10px  扩充自身-->

    <div style="height:100px;width:100%;border:1px red solid">

        <div style="width: 100%;height: 40px;background-color: blue;padding-top: 50px"></div>

    </div>

6、鼠标

<!--style="cursor: pointer": 鼠标移上去变成小手-->

    <input type="button" value="提交" style="cursor: pointer">

还有一个hover样式，是鼠标移上去以后，标签的变化，这个样式只能在head中的style中设置，不能直接在标签的style中添加

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css操作</title>

    <style>

        /*在此定义hover的样式*/

     .c2:hover{

            background-color: red;

        }

    </style>

</head>

<body>

<div class="c2" style="width:100px;height: 100px;border: 1px red solid;color:black">鼠标移动上来背景会变红色</div>

</body>

</html>

7、分层position

<!--外层div  position:relative可以移动设定的距离-->

<!--内层div  position:absolute相对于包含他的标签移动位置-->

    <div style="width:200px;height: 200px;border: 1px red solid;position:relative;">

        <!--底部bottom:0 右侧right:0》》最终右下角-->

        <div style="width: 20px;height: 20px;background: red;position:absolute;bottom: 0;right: 0;"></div>

        <!--底部bottom:0 左侧left:0》》最终左下角-->

        <div style="width: 20px;height: 20px;background: blue;position: absolute;bottom: 0;left: 0;"></div>

        <!--顶部top:0 左侧left:0》》最终左上角-->

        <div style="width: 20px;height: 20px;background: black;position:absolute;left: 0;top:0"></div>

        <!--顶部top:0 右侧right:0》》最终右上角-->

        <div style="width: 20px;height: 20px;background: green;position: absolute;right: 0;top:0"></div>

    </div>

效果：

8、z-index对标签及级别定义，可用排序

如果内层的div不设定bottom,left,right,top相对外层div的位置，则会都重叠在一起，飘在左上角。这时候就可以用z-index设置级别，最高级别的显示在最上面。z-index的最高级别是999，数字越大级别越高

<!--如果去掉bottom,left,right,top属性，就都会飘在左上角重叠,这时可用z-index:进行排序。z-index: 999最高级别-->

  <div style="width:200px;height: 200px;border: 1px red solid;position:relative;">

        <!--底部bottom:0 右侧right:0》》最终右下角-->

        <div style="width: 20px;height: 20px;background: red;position:absolute;z-index: 777;"></div>

        <!--底部bottom:0 左侧left:0》》最终左下角-->

        <div style="width: 20px;height: 20px;background: blue;position: absolute;"></div>

        <!--顶部top:0 左侧left:0》》最终左上角-->

        <div style="width: 20px;height: 20px;background: black;position:absolute;z-index: 999"></div>

        <!--顶部top:0 右侧right:0》》最终右上角-->

        <div style="width: 20px;height: 20px;background: green;position: absolute"></div>

    </div>

最终结果，balck会排在最上面，因为他的级别最高，z-index是999，其次是red级别是777

8、图片样式

overflow:设置图片过大时是否隐藏，还是滚动条显示

<!--div中放一个图片，当图片过大，超过div时，用overflow: hidden  表示超过隐藏；用overflow: scroll表示用滚动条显示

但是如果div大，图片小的情况：

overflow: scroll 默认div加一个滚动条，div大，滚动条也显示，div小，滚动条滑动显示图片

-->

    <div style="width:800px;height: 800px;border: 1px red solid;overflow: scroll">

        <img src="http://ui.imdsx.cn/static/image/dsx.jpg">

    </div>

<!--overflow: auto  div大于图片，则不会显示滚动条，如果div比图片小，会显示滚动条-->

    <div style="width:800px;height: 80px;border: 1px red solid;overflow: auto">

        <img src="http://ui.imdsx.cn/static/image/dsx.jpg">

    </div>

background-repeat：图片是否重复显示

<!--background-image:url('http://ddd/ddd.jpg')背景图，当背景图小的时候，堆叠重复显示

加上属性background-repeat: no-repeat  表示不重复堆叠显示

background-repeat:repeat-x横向堆叠

background-repeat:repeat-y纵向堆叠

-->

    <div style="width:400px;height: 400px;border: 1px red solid;background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat: repeat-x"> </div>

    <br>

        <div style="width:400px;height: 400px;border: 1px red solid;background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat: no-repeat"> </div>

    <br>

    <div style="width:500px;height: 500px;border: 1px red solid;background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat: repeat-y"> </div>

效果：

repeat-x

-----------------------

no-repeat:

------------------------------

repeat-y

html基础：css样式2的更多相关文章

一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
html基础 CSS样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法一.样式表 (一)样式表的分类 1.内联样式表和HTML联合显示,控制精确, ...
一起学HTML基础-CSS样式表常用样式属性
样式属性背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...
CSS样式基础知识
CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...
CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style> #user { width: 200px; ...
CSS 基础知识点样式选择器伪类
CSS 基础知识点汇集版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式能力目标 Ø 理解CSS的 ...
前端基础：CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
前端基础之css样式（选择器）
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如二.c ...
进击的Python【第十三章】：Web前端基础之HTML与CSS样式
进击的Python[第十四章]:Web前端基础之HTML与CSS样式一.web框架的本质众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

随机推荐

Vue Element-UI 中列表单选的实现
el-table中单选的实现引用场景: 选择单条数据进行业务操作实现方式: 给el-table-column设置el-radio Template 代码 <div class="r ...
如何通过命令行简单的执行C程序
如何通过命令行简单的执行C语言编写的程序首先,我们知道C语言程序都是以xxx.c结尾的,这在Windows系统和Linux系统都是一样的.其次,C程序的执行过程为四步:预处理--编译--汇编-- ...
Core + Vue 后台管理基础框架9——统一日志
1.背景前阵子有园友留言,提到日志相关的东西,同时,最近圈子里也有提到日志这个东西.一个充分.集中的统一日志平台还是很有必要的,否则系统出问题了只能靠猜或者干瞪眼.何谓充分,日志记录满足最低要求.出 ...
遍历数组,对象和JSON
遍历数组 var arr2 = [3,4,5,6,7,8]; //第一种方法 for(var i =0;i<arr.length;i++){ console.log(arr2[i]); } // ...
一线大厂工程师推荐：Mysql、Springboot、JVM、Spring等面试合集
前两天晚上,正当我加班沉浸在敲代码的快乐中时,听到前桌的同事在嘀咕:Spring究竟是如何解决的循环依赖? 这让我想起最开始学Java的时候,掌握了一点基本语法和面向对象的一点皮毛.当时心里也是各种想 ...
python3在科学计算中的三种常用数据结构
在科学研究中,数据运算是必不可少的,下面介绍python语言在科学计算中常用的数据结构和运算函数. 主要数据结构: (1)列表,用中括号表示,元素之间逗号分隔,每个元素可以是数字,字符,也可以是列表, ...
Tensorflow2(一)深度学习基础和tf.keras
代码和其他资料在 github 一.tf.keras概述首先利用tf.keras实现一个简单的线性回归,如 \(f(x) = ax + b\),其中 \(x\) 代表学历,\(f(x)\) 代表收入 ...
js实现树级递归，通过js生成tree树形菜单(递归算法)
方法封装: /** * 数据转换为树形(递归),示例:toTreeByRecursion(source, 'id', 'parentId', null, 'children') * @param {A ...
IDEA run/debug configurations中没有配置tomcat选项
原文链接:https://blog.csdn.net/qq_41016818/article/details/80871738 原因分析没有配置tomcat插件解决方法如下: file->s ...
Python3 高级编程技巧(部分)
目录: 在列表.字典.集合中筛选数据为元组元素命名通过列表.元组创建字典字典排序寻找字典的公共键让字典保持有序生成器函数 yield协程同时遍历值与下标在列表.字典.集合中筛选数据很 ...

html基础：css样式2

html基础：css样式2的更多相关文章

随机推荐

热门专题