web学习---CSS学习---笔记(二)
1. CSS的三大特性
层叠性、继承性、优先级
1.1 层叠性
如果设置相同的样式，则有一个样式会层叠另外一个样式
样式冲突原则：就近原则（覆盖），哪个样式离结构近，就执行哪个样式
1.2 继承性
子标签会继承父标签的某些样式（不是全部样式）
某些样式包括：
text-、font-、line-开头的元素
<head><meta charset="utf-8"><title>title><style>div{color: blue;}style>head><body><div><p>你好p>div>body>
p标签的“你好”，也会是蓝色
1.3 优先级
当一个元素指定多个选择器，就会有优先级的产生
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
* 继承的权重为0
- 对于复合选择器，选择器越精准，权重越高
CSS 盒子模型
页面布局要学习三大核心：盒子模型、浮动 和 定位
所谓盒子模型，就是把HTML页面中的布局元素，看作是一个矩形盒子，也就是一个盛装内容的容器
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容
外框board
board的设置：
div{width: 100px;height: 100px;background-color: yellow;border-width: 10px;border-color: red;/* border-style: solid;//实线 *//* border-style: dashed;//虚线 */border-style: dotted;//点线}
或者简写：
border: 10px gray solid;没有顺序
问：如何做到上边框红色，其余框蓝色？
border: 10px blue solid;
border-top: 10px red solid;
注意上下顺序不要写反
border-collapse: collapse;合并相邻的边框
如果div100x100，boarder10x10
那么，盒子的实际内容大小是100 - 10*2 = 80
变小了
内边距
padding属性用于设置内边距，既边框与内容之间的距离
padding-left: 20px;
padding-top: 20px;
简写：
padding也会影响盒子的实际大小
如果div100x100，padding10x10
那么，盒子的实际内容大小是100 + 10*2 = 120
变大了
导航栏小练习
<style>.nav {border-top: 3px #ff8500 solid;border-bottom: 1px #edeef0 solid;height: 41px;background-color: @fcfcfc;}.nav a{display: inline-block;color: #4c4c4c;text-decoration: none;padding-left: 20px;padding-right: 20px;text-align: center;line-height: 41px;}.nav a:hover{background-color: #eeeeee;color: #ff8500;}style>head><body><div class="nav"><a href="#">设为首页a><a href="#">手机新浪网a><a href="#">移动客户端a><a href="#">博客a><a href="#">微博a><a href="#">关注我a>div>body>
- 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
外边距（margin）
margin属性用于设置外边距，即控制盒子和盒子之间的距离
写法：margin-left等
- margin的简写与padding的简写方式一样
外边距的典型应用
外边距可以让 块级盒子 水平居中，但必须满足两个条件：
- 盒子必须指定了宽度
- 盒子左右的外边距都设置为auto
width: 200px;
height: 100px;
background-color: purple;
/* margin-left: auto; */
/* margin-right: auto; */
margin: 0 auto;
以上方法是让块级元素水平居中
行内元素或者行内块元素水平居中，可以给其父元素添加text-align:center即可
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
主要由两种情况：
- 相邻块元素垂直外边距的合并
- 嵌套块元素垂直外边距的塌陷
1. 相邻块元素垂直外边距的合并
如果上下两个相邻块元素相遇，如果上面那个有margin-bottom，下面那个有margin-top，实际效果是，取两个最大的，作为中间的间距
这样的话，只设置一个margin即可
2. 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距的同时，子元素也有上外边距，此时，父元素会塌陷较大的外边距值
父元素的外边距值按最大的外边距设置
如果，我们就是要实现父元素有上边距，子元素也有上边距的效果，该如果操作呢？
可以使用三种方法：
- 父元素不设置margin，而改为设置border
border-top: 1px #800080 solid; - 可以为父元素定义 上内边距
padding-top: 1px; - 可以为父元素添加
overflow: hidden
清除内外边距
不同的标签，有不同的默认边距
而不同的浏览器，默认边距有可能也不一样
因此，我们将进行清除内外边距，使得默认边距没有
* {margin: 0px;padding: 0px;
}
行内元素为了照顾兼容性，尽量只设置左右的内外边距，不要设置上下的内外边距(设置的也不起左右)
行内元素转换为块级元素或者行内块元素，就可以设置上下的内外边距了
盒子-练习
思路
大致分块：
参考代码：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style>* {margin: 0px;padding: 0px;}body {background-color: #f5f5f5;}a {color: #333333;text-decoration: none;}.box {width: 300px;height: 400px;background-color: white;border: 1px lightgray solid;/*上下100px 左右自动*/margin: 100px auto;}.box img {width: 100%;}.review {height: 70px;font-size: 14px;/* 因为没有设置width，因此padding不会超过盒子的宽度 */padding: 0px 28px;margin-top: 30px;margin-bottom: 20px;}.appraise {font-size: 12px;margin-top: 20px;padding: 0px 28px;color: #b0b0b0;}.info span {font-size: 14px;margin-top: 15px;}.info .first {padding-left: 28px;}.info .line {color: #b0b0b0;}.info .price {color: orange;}style>head><body><div class="box"><img src="img/企业微信20220420-165631@2x.png" alt="占位图" ><p class="review">快递🐂，整体不错，蓝牙可以说秒连。红米给力p><div class="appraise">来自 Asian 的评价div><div class="info"><span class="first"> <a href="">Redmi AirDots真无线蓝...a>span><span class="line">|span><span class="price">99.9元span>div>div>body>
html>小栗子
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style>* {margin: 0px;padding: 0px;}li {/* 去掉 前面的圆点 */list-style: none;}.box {border: 1px solid #D3D3D3;width: 248px;height: 163px;margin: 100px auto;}.box .title {border-bottom: 1px dotted #D3D3D3;height: 32px;font-size: 14px;font-weight: 400;padding-left: 15px;line-height: 32px;}.box ul {margin: 5px 10px;}.box ul li{height: 23px;line-height: 23px;}.box ul li a {font-size: 12px;text-decoration: none;color: #666666;}.box ul li a:hover {text-decoration: underline;}style>head><body><div class="box"><h3 class="title">优品购快报h3><ul><li><a href="">【特惠】爆款耳机5折秒a>li><li><a href="">【特惠】母亲节，健康好礼低至5折a>li><li><a href="">【特惠】爆款耳机5折秒。。。a>li><li><a href="">【特惠】爆款耳机5折a>li><li><a href="">【特惠】爆款耳机a>li>ul>div>body>
html>圆角
- 圆角边框
border-radius: 100px;或者border-radius: 50%; border-radius: 10px 20px 30px 40px;左上、右上、右下、左下
盒子阴影
box-shadow: 20px 10px 10px 10px rgba(0,0,0,0.3);
文字阴影
text-shadow: 10px 10px 10px #333333;
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！