CSS 入门2（样式属性+元素溢出+显示特性+盒子模型）

css样式属性

常用布局样式属性
常用文本样式属性
元素溢出
显示特性
盒子模型

常用布局样式属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS学习</title><style>.box{width:150px;height:150px;background: papayawhip;/*设置背景图片 不重复显示图片 拉伸当前显示这个图片*//*background: url("520.png") no-repeat;*//*background: url(520.png) no-repeat;*//*设置标签的四周边框*//*border: 15px solid red;*/border-top: 5px solid red;border-left: 5px solid black;border-bottom: 5px solid yellow;border-right: 5px solid green;/*浮动  左右*/float:right;}.box0{width:1000px;height:1000px;background: papayawhip;}.box1{width:500px;height:100px;background: peru;}.box2{width:400px;height:100px;background: orange;float: right;}.box3{width:500px;height:100px;background: paleturquoise;}</style>
</head>
<body><div class="box">三行情书</div><div class="box0"><div class="box1">思无邪，念折堕，今夕两茫茫</div><div class="box2">为伊憔，胭脂笑，欲语寄红楼</div><div class="box3">天雨粟，鬼夜哭，思念漫太古</div></div></body>
</html>

图片为网页效果，蝴蝶是我电脑屏幕上的。

常用文本样式属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS学习</title><style>p{/*设置文字颜色 大小 加粗*/color:pink;font-size: 30px;font-width: bold;/*设置文字的字体*/font-family: 'Microsoft YaHei UI';background: paleturquoise;/*下划线*/text-decoration: underline;/*text-decoration: line-through;*//*text-decoration: overline;*//*行高*/line-height: 100px;/*设置水平方向对齐 居中*/text-align: center;/*缩进*/text-index: 30px;}span{color:green;}a{/*取消下划线*/text-decoration: none;}</style>
</head>
<body>
<!--    span标签可以设置某一段文字中一两个词的样式--><p>富贵可离<br>权柄可逆<br>独独是<span>你</span>不可弃</p><a href="http://www.baidu.com">百度</a></body>
</html>

元素溢出

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS学习</title><style>.box1{width:1000px;height:100px;background:orange;/*    元素溢出在父标签选择器上进行设置*//*    超出部分隐藏*//*    overflow:hidden;*//*    超出部分显示*/ /*    overflow:visible;*//*    超出部分滚动显示*/    overflow:auto;}.box2{width:500px;height:200px;background: paleturquoise;}</style>
</head>
<body><div class="box1"><div class="box2">思无邪，念折堕，今夕两茫茫</div></div></body>
</html>

显示特性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS学习</title><style>.box1{wieth:100px;height:100px;background: paleturquoise;/*把该标签隐藏并且不占用位置*/display:none;}.box2{wieth:100px;height:100px;background: paleturquoise;/*设置div和其他元素一行显示，以后就不能设置宽高*/display:inline;}a{/*设置div单独占一行显示，不和其他标签在一行显示*/display:block;}</style>
</head>
<body><div class="box1">happy every day</div><p>哈哈</p><div class="box2">happy new year</div><a href="https://www.baidu.com">百度</a></body>
</html>

盒子模型

盒子模型设置4部分：
1.内容大小(width,height)
2.边框大小(border)
3.内边框大小(padding)
4.外边框大小(margin)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS学习</title><style>.box1{width:200px;height:200px;background: paleturquoise;border: 5px solid red;/*padding-top: 10px;*//*padding-left: 10px;*/padding: 10px;}.box2{width:100px;height:150px;background: royalblue;}.box3{width:100px;height:100px;background: grey;margin-top: 10px;}</style>
</head>
<body><div class="box1"><div class="box2">happy new year</div></div><div class="box3"></div><p>哈哈</p></body>
</html>

CSS 入门2（样式属性+元素溢出+显示特性+盒子模型）相关推荐

colordialog通过哪属性取其颜色_IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值1...
CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
CSS基础「六」元素的显示与隐藏
本篇文章为 CSS 基础系列笔记第六篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
html不换行溢出省略号代替,css怎么设置强制不换行溢出显示省略号？
css可以使用white-space:nowrap;样式使元素内文本不换行,然后使用text-overflow:ellipsis;样式设置元素内文本超出显示省略号. css设置强制不换行溢出显示省略号 ...
CSS控制列表样式属性list-style有哪些？怎么用？
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
css样式三种引入方式选择器常用属性：背景属性字体属性边框属性内间距外间距盒子模型
一.CSS简介 1.什么是css 重叠样式表主要是负责标签的样式美化页面一个网页分三大部分结构层: 主要由html负责负责页面的结构表现层: 主要由css负责页面的展示样式美化页面行 ...
前端学习日记（八）：css中字体、列表、鼠标形状、显示与隐藏、溢出处理、盒子模型的简单应用
一.字体样式(font) font-style [用于打开和关闭斜体文本] • normal 正常字体,关闭斜体 • italic 斜体 • oblique 模拟斜体 font-weight [为字体 ...
html ul list style,CSS list-style列表样式属性用法介绍
list-style我们使用得最多的地方就是ul li中了,但很多朋友都搞不清楚•list-style-type,•list-style-position,•list-style-image具体的区别 ...
CSS和JS样式属性对照表
注意:1.在使用js时,如newTD.style.paddingLeft="200";(错误),正确生效的写法是newTD.style.paddingLeft="200p ...

CSS 入门2（样式属性+元素溢出+显示特性+盒子模型）

css样式属性

常用布局样式属性

常用文本样式属性

元素溢出

显示特性

盒子模型

CSS 入门2（样式属性+元素溢出+显示特性+盒子模型）相关推荐

最新文章

热门文章