分类目录归档：CSS

CSS的研究

CSS外边距 margin 属性

发表评论
CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间

%title插图%num
CSS拥有用于为元素的每一侧指定外边距的属性

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
margin 所有外边距属性都可以设置以下值 (允许负值)

  • auto – 浏览器来计算外边距
  • length – 以 px、pt、cm 等单位指定外边距
  • % – 指定以包含元素宽度的百分比计的外边距
  • inherit – 指定应从父元素继承外边距
单独使用margin赋值有多种写法

  • margin: 25px 50px 75px 100px; //设置上右下左
  • margin: 25px 50px 75px; //设置上 左右 下
  • margin: 25px 50px; //设置上下 左右

tip:当两个div都有margin设置的边距而重叠时，优先选择最大的数值。忽略另一个数值。

<div style="background: yellow;height: 100px;
outline:black solid 2px; width: 100px;margin-bottom: 10px;">
</div> //使用了最大的边距距离

<div style="background: tomato;height: 100px;
outline:black solid 2px; width: 100px;margin-top: 5px;">
</div> //该边距被忽略
10px
5px

CSS盒子模型

发表评论
%title插图%num

所有HTML元素可以看作盒子，在CSS中，”box model“这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子由以下不同部分组成

  • Margin(外边距) – 清除边框外的区域，外边距是透明的。
  • Border(边框) – 围绕在内边距和内容外的边框。
  • Padding(内边距) – 清除内容周围的区域，内边距是透明的。
  • Content(内容) – 盒子的内容，显示文本和图像。
%title插图%num
上面的图片是250 px宽。 这个元素的总宽度也是250 px。

最终元素的总宽度计算公式是这样的：

总元素的宽度= 宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度= 高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

CSS 的 display 属性

发表评论
display 属性规定元素应该生成的框的类型

inline（行内元素）

  1. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 
  2. 不能更改元素的height，width的值，大小由内容撑开. 
  3. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.

block（块级元素）

  1. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 
  2. 能够改变元素的height，width的值. 
  3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

 inline-block（融合行内于块级）

  1. 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
  2. 用通俗的话讲，就是不独占一行的块级元素。
%title插图%num
%title插图%num

inline-block 布局 与 浮动布局(float)

不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果
相同之处：能在某程度上达到一样的效果

display 还可以用于隐藏/显示属性
display: none; //元素隐藏
display: block;  //元素显示

与 visibility:hidden; 不同的是，display 隐藏后，不再占有原来位置。常用于下拉菜单等简化显示界面的效果。使界面清爽。而 visibility:hidden; 将只隐藏区域，但仍然保留占有位置。

CSS 轮廓

发表评论
轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素

与 border(边框) 不同的是，它是元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

outline
  • outline-style 设置轮廓的样式
  • outline-color 属性用于设置轮廓的颜色
  • outline-width 属性指定轮廓的宽度
  • outline-offset 属性在元素的轮廓与边框之间添加空间
  • outline 属性是用于设置以下各个轮廓属性的简写属性
当单独用outline 赋值时，它的赋值顺序为

outline: blue solid 2px; //颜色 样式 大小

定义实线的轮廓

实例：

dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。

定义点状的轮廓

定义虚线的轮廓

定义实线的轮廓

定义双线的轮廓

定义 3D 凹槽轮廓

定义 3D 凸槽轮廓

定义 3D 凹边轮廓

定义 3D 凸边轮廓

定义无轮廓

定义隐藏的轮廓

CSS position 属性

发表评论

position 属性规定元素的定位类型

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

.div{
   height: 100px;
   width: 100px;
   border-style: dotted;
   position: relative;
}
.h2 {
   position:absolute;
   left:24px; 
   top:16px; 
}
值 描述
absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，”left:20″ 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

position 常用于搭配 display:none 制作隐藏下拉栏目，制作修饰元素的小图标

—position案例—

CSS选择器

发表评论

css是个很奇妙的东西。至于怎么奇妙，可以 参考文档

鼠标移动到目标 显示效果

<style>
/* 选择鼠标指针位于其上的链接 呈现效果 */
.shady:hover{
      color: white;
}
/* 原样式 */
.shady{
      color:black;
      /* 过渡效果1s */
      transition:1s;
}
</style>
<body>
<h1 class="shady">阿姨你行不行</h1>
</body>

阿姨你行不行

用多种CSS达到 悬浮提示框效果

/* 定位 搭配隐藏 */
.prompt_div{
position: relative;
height: 40px;
width: 120px;
background:green;
line-height:40px;
text-align:center;
}
/* 隐藏定位栏 */
.hide_div{
display: none;
color: black;
width: 220px;
height: 90px;
background:rgba(244, 244, 244);
position: absolute;
left:0px;
box-shadow:4px 4px 5px #ccc; 
}
/* 鼠标移动到 显示定位栏 */
.prompt_div:hover div{
display: block;
}

<div class="prompt_div">显示提示？<div class="hide_div">展示提示</div></div>
显示提示？

这是用到了position定位+display区域显示


CSS三种写法的优先级

html文件内部内容

<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
 <meta charset="UTF-8"/>
 <title>css样式优先级</title>
<!-- 外部样式 -->
 <link href="index.css" rel="stylesheet" type="text/css"/>
<!-- 内页样式 -->
 <style type="text/css">
 .box{
 background:red;
 border:1px
 solid black;
 width:100px;
 height:100px;
 }
 </style>
 </head>
 <body>
<!-- 行内样式  -->
 <div style="background:yellow;width:100px;height:100px;" class="box">
 </div>
 </body>
 </html>

引用的css文件内容

.box{ width:100px; height:100px; background:blue; }

结果显示为 行内式的css效果：


所以，我们得知 CSS三种写的优先级是：行内样式＞内页样式＞外部样式

【学习】CSS样式

发表评论
%title插图%num

CSS相当于网页的衣裳，给网页内容呈现一个漂亮的布局；效果；甚至动画

CSS作为修饰HTML样式的脚本语言，它可以写在HTML代码之中，

用style属性修饰 , 称为 嵌入式CSS

<div style="color: blue;background-color: coral;width: 10%;">你好CSS</div>

你好CSS

也可以写在外部后用 <link>引用，用.css文件来存储，称为 外部式CSS

或者写在HTML的<head>里面，称为 内部式CSS
<link rel="stylesheet" type="text/css" href="body.css"> //外部式
<style>
body {          //内部式
background-color: rgb(255, 254, 210, 0.7);            
border: whitesmoke 10px none;        
}
</style>
选择器分组
h1,h2,h3,h4{color:red} //共同继承同一个CSS样式

我是继承了红色

我是继承了红色

我是继承了红色

我是继承了红色

派生选择器
li strong{color:red} //在li 里面的strong，会继承这个CSS样式
  • HELLO

    • HELLO

    类选择器
    h4.txt_red{color:red} //针对h1标签的元素，若引用“text_red”名后将继承这个CSS属性

    你好

    你好

    【学习】CSS颜色相关

    发表评论
    %title插图%num

    在计算机中，设置颜色是由RGB构成。即 R(red)G(green)B(blue) 组成

    CSS颜色；不同元素设置color

    000000 000033 000066 000099 0000CC 0000FF
    003300 003333 003366 003399 0033CC 0033FF
    006600 006633 006666 006699 0066CC 0066FF
    009900 009933 009966 009999 0099CC 0099FF
    00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
    00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
    330000 330033 330066 330099 3300CC 3300FF
    333300 333333 333366 333399 3333CC 3333FF
    336600 336633 336666 336699 3366CC 3366FF
    339900 339933 339966 339999 3399CC 3399FF
    33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
    33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
    660000 660033 660066 660099 6600CC 6600FF
    663300 663333 663366 663399 6633CC 6633FF
    666600 666633 666666 666699 6666CC 6666FF
    669900 669933 669966 669999 6699CC 6699FF
    66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
    66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
    990000 990033 990066 990099 9900CC 9900FF
    993300 993333 993366 993399 9933CC 9933FF
    996600 996633 996666 996699 9966CC 9966FF
    999900 999933 999966 999999 9999CC 9999FF
    99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
    99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
    CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
    CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
    CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
    CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
    CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
    CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
    FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
    FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
    FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
    FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
    FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
    FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

    color:red; //直接设置颜色

    color:#00FF00; //RGB进制设置

    color:rgb(255,0,0); //RGB数值设置

    关于更多与color有关CSS知识

    CSS颜色；实现渐变背景background-image: linear-gradient()

    linear-gradient() //函数用于创建一个表示两种或多种颜色线性渐变的图片

    background-image //设置背景图片

    linear-gradient(blue,red); //默认从上到下渐变

     

    linear-gradient(45deg,blue,red); //渐变轴为45度，从蓝色渐变到红色

     

    linear-gradient(to left top,blue,red); //从左上到右下，从红色渐变到蓝色

     

    linear-gradient(0deg,blue 40%,red); //从下到上，从块中整体高度的40%处蓝色渐变到红色，

     

    当然，除了线性渐变，CSS还有径向渐变的方式 radial-gradient()


     

    background-image: radial-gradient(blue,red); //径向渐变

     

    background-image: radial-gradient(ellipse,blue,red); //椭圆径向渐变

    利用所学CSS知识，实现一些花里胡哨的渐变方案

     

     
    关于更多与linear-gradient有关CSS知识

    【学习】搭建网站

    1条回复

    一说到搭建网站，我们就得知道什么是IP地址，还有什么是域名了


    先分配下角色，一个是客人，一个是店长。

    店长打算在自己家里开一家生鱼片店。于是向门店负责的管理方申请门店注册。然后将自家车库改

    造成店铺。腾出一个房间放库存。生意就这样开张了；
    客人想买些生鱼片，跟着导航地图的门店地址来到了店长家里，挑选了精美的生鱼片打包带走。

    这样的例子看起来就像搭建网站。要有的元素有很多：

    • .com 域名=门店招牌
    • Ser 服务器=店长家
    • html 网站内容=店面
    • php 网站环境=店铺设施
    • MySQL 数据库=库房
    %title插图%num